/* --- memo: memotest bilingüe. Cartas-sticker con dorso de lunares / corazones pixel y vuelta 3D --- */
.memo { --turn: var(--sun); }
.memo [hidden] { display: none !important; }

/* ---- banderitas dibujadas en CSS (los emoji de bandera no andan en Windows) ---- */
.memo .mm-flag {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--pixel); font-size: .72rem; line-height: 1; font-weight: 700;
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px; padding: 2px 5px 2px 3px; box-shadow: 1.5px 1.5px 0 var(--ink); vertical-align: middle;
}
.memo .mm-flag i { width: 15px; height: 10px; border: 1.5px solid var(--ink); border-radius: 2px; flex: none; }
.memo .mm-flag.es i { background: linear-gradient(#e8432f 0 25%, #ffc93c 25% 75%, #e8432f 75%); }
.memo .mm-flag.de i { background: linear-gradient(#1f1a17 0 33.3%, #e8432f 33.3% 66.6%, #ffc93c 66.6%); }

/* ---- setup ---- */
.memo .mm-setup-card { max-width: 760px; margin: 4vh auto; }
.memo .mm-logo { font-size: clamp(2rem, 5vw, 3rem); margin: 4px 0 6px; text-align: center; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; color: var(--sun); text-shadow: 3px 4px 0 var(--ink); }
.memo .mm-sub { text-align: center; font-weight: 700; color: var(--ink-soft); margin: 0 0 6px; }
.memo .mm-decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.memo .mm-dk {
  flex-direction: column; gap: 4px; padding: 12px 10px 10px; background: var(--c); transform: rotate(var(--tilt, 0deg));
}
.memo .mm-dk:nth-child(odd) { --tilt: -1.2deg; } .memo .mm-dk:nth-child(even) { --tilt: 1deg; }
.memo .mm-dk.sel { outline: 4px solid var(--ink); outline-offset: 4px; transform: rotate(0) scale(1.03); }
.memo .mm-dk-ico { font-size: 1.7rem; letter-spacing: 2px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.memo .mm-dk b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.memo .mm-dk[style*="--cobalt"] b { color: #fff; -webkit-text-stroke: 0; }
.memo .mm-dk:disabled, .memo .mm-sz:disabled { opacity: 1; }
.memo .mm-dk:disabled:not(.sel), .memo .mm-sz:disabled:not(.sel) { opacity: .55; }
.memo .mm-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.memo .mm-sz { flex-direction: column; background: var(--sheet); gap: 8px; padding: 12px; }
.memo .mm-sz.sel { background: var(--sun); outline: 4px solid var(--ink); outline-offset: 4px; }
.memo .mm-sz-grid { display: grid; grid-template-columns: repeat(var(--cols), 7px); gap: 2px; }
.memo .mm-sz-grid i { width: 7px; height: 9px; border-radius: 2px; background: var(--tomato); border: 1px solid var(--ink); }
.memo .mm-sz-grid i:nth-child(odd) { background: var(--bubble); }
.memo .mm-wait { margin-top: 24px; font-weight: 700; }

/* ---- layout de partida ---- */
.memo .mm-game { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; }
.memo .mm-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.memo .mm-head h2 { font-size: 1.7rem; margin: 0; }
.memo .mm-deck { display: inline-block; margin-top: 8px; font-weight: 800; font-size: .9rem; background: var(--sheet); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; box-shadow: 2px 2px 0 var(--ink); transform: rotate(-1.5deg); }
.memo .mm-status {
  position: relative; margin: 0; padding: 12px 14px; font-weight: 800; background: var(--sheet); border: var(--stroke); border-radius: var(--r-sm); box-shadow: var(--shadow);
}
.memo .mm-status.mine { background: var(--sun); box-shadow: 5px 5px 0 var(--turn), 5px 5px 0 2px var(--ink); animation: mo-pop .4s var(--ease-pop); }
.memo .mm-status::after {
  content: attr(data-left); position: absolute; right: -8px; top: -14px; font-family: var(--pixel); font-size: .8rem; font-weight: 700;
  background: var(--ink); color: var(--sheet); padding: 2px 8px; border-radius: 6px; transform: rotate(4deg);
}
@keyframes mo-pop { from { transform: scale(.94) rotate(-1deg); } }

.memo .mm-players { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.memo .mm-pl {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "av name n" "pile pile pile"; align-items: center; gap: 4px 10px;
  padding: 10px 12px; background: var(--sheet); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow);
  transition: transform .3s var(--ease-pop), box-shadow .3s;
}
.memo .mm-pl .avatar { grid-area: av; width: 38px; height: 38px; font-size: 1rem; }
.memo .mm-pl-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memo .mm-pl-name small { color: var(--ink-soft); font-weight: 700; }
.memo .mm-count { grid-area: n; font-family: var(--pixel); font-weight: 700; font-size: 1.15rem; line-height: 1; min-width: 34px; height: 34px; padding: 0 6px; display: grid; place-items: center; background: var(--sun); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.memo .mm-pile { grid-area: pile; display: flex; flex-wrap: wrap; gap: 3px; min-height: 30px; padding: 3px 4px; border: 2px dashed #1f1a1733; border-radius: 10px; }
.memo .mm-pile i {
  font-style: normal; font-size: 1rem; width: 26px; height: 30px; display: grid; place-items: center;
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 1.5px 1.5px 0 var(--pc);
  animation: mo-chip .45s var(--ease-pop) both;
}
.memo .mm-pile i:nth-child(odd) { rotate: -4deg; } .memo .mm-pile i:nth-child(even) { rotate: 3deg; }
@keyframes mo-chip { from { transform: scale(.2) translateY(10px); opacity: 0; } }
.memo .mm-pl.turn { transform: translateX(6px) rotate(-.6deg); box-shadow: 7px 7px 0 var(--pc); outline: 3px solid var(--pc); outline-offset: 2px; }
.memo .mm-pl.gone { opacity: .45; filter: grayscale(1); }
.memo .mm-tape {
  position: absolute; top: -12px; right: 12px; padding: 2px 12px 3px; white-space: nowrap; font-family: var(--display); font-size: .85rem; line-height: 1.2;
  background: #ffe28ae6; border-left: 2px dashed #1f1a1730; border-right: 2px dashed #1f1a1730; box-shadow: 2px 2px 0 #1f1a1724; transform: rotate(4deg);
  animation: mo-tape .45s var(--ease-pop) both;
}
@keyframes mo-tape { from { transform: rotate(-12deg) scale(.4); opacity: 0; } }

.memo .mm-learn h3 { margin: 4px 0 8px 4px; }
.memo .mm-vocab {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center;
  padding: 12px 14px; background: var(--paper-2); border: var(--stroke); border-radius: var(--r); box-shadow: var(--shadow); transform: rotate(-1deg);
  animation: mo-pop .45s var(--ease-pop);
}
.memo .mm-v-emoji { grid-row: span 2; font-size: 2.6rem; line-height: 1; }
.memo .mm-v-row { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; }
.memo .mm-hint { margin: 0; color: var(--ink-soft); font-weight: 600; font-size: .95rem; padding: 0 4px; }

/* ---- tablero ---- */
.memo .mm-table { background: var(--paper-2); border: 4px solid var(--ink); border-radius: 28px; box-shadow: var(--shadow-lg); padding: 18px; }
.memo .mm-board {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); margin: 0 auto;
  max-width: calc((100vh - 110px) / var(--rows) * .75 * var(--cols)); min-width: min(100%, 560px);
}
.memo .mm-card {
  all: unset; position: relative; aspect-ratio: 3 / 4; perspective: 700px; cursor: default; container-type: inline-size; border-radius: 12px;
}
.memo .mm-board:not(.dealt) .mm-card { animation: mo-deal .5s var(--ease-pop) var(--d) both; }
@keyframes mo-deal { from { transform: translateY(-30px) rotate(-14deg) scale(.5); opacity: 0; } }
.memo .mm-card:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.memo .mm-inner {
  position: absolute; inset: 0; transform-style: preserve-3d; transform: rotate(var(--tilt)) rotateY(0);
  transition: transform .55s var(--ease-pop);
}
.memo .mm-card.up .mm-inner { transform: rotate(0deg) rotateY(180deg); }
.memo .mm-back, .memo .mm-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden;
}
/* dorsos: lunares y corazones pixel, en damero */
.memo .mm-back { display: grid; place-items: center; }
.memo .mm-back.dots { background: radial-gradient(circle, #fffdf7 0 3.2px, transparent 3.8px) 0 0 / 14px 14px, radial-gradient(circle, #fffdf7 0 3.2px, transparent 3.8px) 7px 7px / 14px 14px, var(--tomato); }
.memo .mm-back.hearts {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' shape-rendering='crispEdges'%3E%3Cg fill='%23fffdf7' fill-opacity='.7'%3E%3Cpath transform='translate(2 3)' d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3Cpath transform='translate(13 14)' d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 22px 22px, var(--bubble);
}
.memo .mm-back::before { content: ''; position: absolute; inset: 5px; border: 2px dashed #fffdf7b0; border-radius: 7px; }
.memo .mm-emblem {
  position: relative; width: 42cqi; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--sun); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--display); font-size: 26cqi; line-height: 1; padding-top: 2cqi;
}
.memo .mm-back.hearts .mm-emblem { background: var(--sheet); }

/* cara */
.memo .mm-face {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqi;
  padding: 16cqi 5cqi 8cqi; background: var(--sheet); text-align: center;
}
.memo .mm-face.es { background: linear-gradient(#ffe7b0 0 22%, var(--sheet) 22%); }
.memo .mm-face.de { background: linear-gradient(#d6e0ff 0 22%, var(--sheet) 22%); }
.memo .mm-face .mm-flag { position: absolute; top: 5cqi; left: 6cqi; font-size: max(9px, 10cqi); padding: 1px 4px 1px 2px; border-width: 1.5px; box-shadow: 1px 1px 0 var(--ink); }
.memo .mm-face .mm-flag i { width: max(11px, 13cqi); height: max(7px, 9cqi); }
.memo .mm-emoji { font-size: 40cqi; line-height: 1.1; filter: drop-shadow(1.5px 1.5px 0 #1f1a1740); }
.memo .mm-word { display: flex; flex-direction: column; align-items: center; gap: 1.5cqi; width: 100%; min-width: 0; }
.memo .mm-art { font-family: var(--pixel); font-size: max(9px, 11cqi); font-weight: 700; line-height: 1.1; padding: 0 5cqi; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--paper-2); }
.memo .mm-art.m { background: var(--cobalt); color: #fff; }
.memo .mm-art.f { background: var(--tomato); color: #fff; }
.memo .mm-art.n { background: var(--mint); }
.memo .mm-noun { font-weight: 800; font-size: max(10px, 15cqi); line-height: 1.05; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.memo .mm-noun.long { font-size: max(9px, 12cqi); }
.memo .mm-noun.xl { font-size: max(8px, 10cqi); }

/* estados */
.memo .mm-board.mine .mm-card.can { cursor: pointer; }
@media (hover: hover) { .memo .mm-card.can:hover .mm-inner { transform: rotate(calc(var(--tilt) * -2)) translateY(-5px) scale(1.04); } }
.memo .mm-board.mine .mm-card.can .mm-back { box-shadow: 4px 4px 0 var(--ink); }
.memo .mm-card.wait .mm-inner { transform: rotate(0) scale(.94) translateY(3px); transition-duration: .1s; }
.memo .mm-card.up .mm-face { box-shadow: 4px 4px 0 var(--pc, var(--ink)); }
.memo .mm-card.yay .mm-face { border-color: var(--ink); box-shadow: 0 0 0 4px var(--pc), 5px 5px 0 4px var(--ink); }
.memo .mm-card.yay { animation: mo-yay .6s var(--ease-pop) .4s both; z-index: 2; }
@keyframes mo-yay { 40% { transform: scale(1.12) rotate(-3deg); } 100% { transform: scale(1.06); } }
.memo .mm-card.nope { animation: mo-nope .5s ease-in-out .45s; }
@keyframes mo-nope { 20%, 60% { transform: translateX(-6px) rotate(-2deg); } 40%, 80% { transform: translateX(6px) rotate(2deg); } }
.memo .mm-card.gone { animation: none; pointer-events: none; }
.memo .mm-card.gone .mm-inner { visibility: hidden; }
.memo .mm-card.gone::after { content: ''; position: absolute; inset: 4px; border: 2.5px dashed #1f1a1730; border-radius: 10px; }

/* cartas volando a la pila */
.memo .mm-fx { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.memo .mm-ghost { position: fixed; container-type: inline-size; }
.memo .mm-ghost .mm-face { transform: none; box-shadow: 4px 4px 0 var(--pc); }

/* confeti */
.memo .mm-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.memo .over > .mm-confetti { position: fixed; overflow: hidden; }
.memo .mm-confetti i {
  position: absolute; width: var(--w); height: var(--h); background: var(--bg); border: 1.5px solid var(--ink); border-radius: 2px;
  animation: mo-conf var(--t) cubic-bezier(.2, .6, .4, 1) var(--d) both;
}
@keyframes mo-conf {
  0% { transform: translate(0, 0) rotate(0) scale(.4); }
  30% { transform: translate(calc(var(--dx) * .6), var(--up)) rotate(calc(var(--r) * .4)) scale(1); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--fall)) rotate(var(--r)); opacity: 0; }
}
.memo .mm-confetti.rain i { animation-name: mo-rain; animation-timing-function: linear; }
@keyframes mo-rain {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(var(--dx), var(--up)) rotate(calc(var(--r) * .5)); }
  100% { transform: translate(calc(var(--dx) * -.5), var(--fall)) rotate(var(--r)); }
}

/* fin */
.memo .mm-win h2 { margin: 8px 0 10px; }
.memo .mm-win-cards { display: flex; justify-content: center; margin: -6px 0 6px; height: 74px; }
.memo .mm-win-cards i {
  font-style: normal; font-size: 2rem; width: 52px; height: 68px; display: grid; place-items: center; margin: 0 -6px;
  background: var(--sheet); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink);
  rotate: calc(var(--o) * 9deg); translate: 0 var(--y);
  animation: mo-fan .6s var(--ease-pop) calc(var(--k) * 80ms + .2s) both;
}
@keyframes mo-fan { from { transform: translateY(40px) scale(.3); opacity: 0; } }
.memo .mm-tie { font-weight: 800; margin: 0 0 6px; }
.memo .mm-rank { list-style: none; padding: 0; margin: 4px auto 10px; display: flex !important; flex-direction: column; gap: 8px; max-width: 320px; }
.memo .mm-rank li { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: var(--r-sm); background: var(--sheet); box-shadow: 3px 3px 0 var(--pc); }
.memo .mm-rank li:first-child { background: var(--paper-2); }
.memo .mm-rank .avatar { width: 32px; height: 32px; font-size: .9rem; }
.memo .mm-rank b { flex: 1; text-align: left; }
.memo .mm-rank span:last-child { font-family: var(--pixel); }
.memo .mm-win .row { justify-content: center; margin-top: 8px; }

@media (max-width: 960px) {
  .memo .mm-game { grid-template-columns: 1fr; }
  .memo .mm-side { position: static; }
  .memo .mm-players { flex-direction: row; flex-wrap: wrap; }
  .memo .mm-pl { flex: 1 1 160px; }
  .memo .mm-learn { display: none; }
  .memo .mm-board { max-width: none; min-width: 0; }
  .memo .mm-decks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .memo .mm-inner { transition: none; }
}

/* ---- tablet / táctil ---- */
.memo .mm-board, .memo .mm-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.memo .mm-board { max-width: calc((100svh - 140px) / var(--rows) * .75 * var(--cols)); }
@media (max-width: 1180px) and (min-width: 961px) {
  .memo .mm-game { grid-template-columns: 250px minmax(0, 1fr); gap: 20px; }
  .memo .mm-table { padding: 14px; }
}
/* vertical: arriba una franja compacta (estado + jugadores), abajo el tablero a todo el ancho */
@media (max-width: 960px) {
  .memo .mm-side { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: center; }
  .memo .mm-head { display: flex; flex-direction: column; }
  .memo .mm-head h2 { font-size: 1.4rem; }
  .memo .mm-deck { margin-top: 4px; }
  .memo .mm-players { grid-column: 1 / -1; gap: 10px; }
  .memo .mm-pl { padding: 8px 10px; }
  .memo .mm-pile { min-height: 0; }
  .memo .mm-pile:empty { display: none; }
  .memo .mm-table { padding: 12px; border-radius: 22px; }
  .memo .mm-board { max-width: calc((100svh - 330px) / var(--rows) * .75 * var(--cols)); min-width: 0; }
}