/* memoria.css — La Memoria Prodigiosa (baraja memorizada) */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.mm-screen { min-height:100svh; min-height:100vh; display:flex; justify-content:center;
  background:radial-gradient(circle at 50% 18%, #1c3252 0%, #122236 55%, #0a141f 100%); color:#e8f0f8; }
.mm-inner { width:100%; max-width:560px; padding:24px 14px 40px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.mm-title { font-size:20px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin:0; color:#9fd0ff; }
.mm-sub { font-size:12px; color:#7a97b5; margin:-8px 0 0; }
.mm-status { font-size:14px; color:#aec9e2; margin:0; min-height:20px; }
.mm-status.is-memo { color:#ffd977; font-weight:700; }
.mm-status.is-error { color:#ff8a9c; }

.mm-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mm-btn { font-size:13px; font-weight:700; letter-spacing:.6px; padding:11px 18px; border-radius:12px;
  border:1px solid rgba(159,208,255,.4); background:rgba(159,208,255,.12); color:#d5eaff; cursor:pointer; }
.mm-btn:active { transform:translateY(1px); }
.mm-btn[disabled] { opacity:.45; cursor:default; }

/* Rejilla de 52 cartas */
.mm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px 8px; width:100%; }
.mm-cell { display:flex; flex-direction:column; align-items:center; gap:3px; }
.mm-flipbox { position:relative; width:100%; aspect-ratio:5/7; perspective:600px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mm-flip { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.1,.2,1); }
.mm-cell.up .mm-flip { transform:rotateY(180deg); }
.mm-face, .mm-back { position:absolute; inset:0; border-radius:7px; overflow:hidden; backface-visibility:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,.4); }
.mm-back svg, .mm-face svg { width:100%; height:100%; display:block; }
.mm-face { transform:rotateY(180deg); }
.mm-num { font-size:10.5px; font-weight:700; color:#7a97b5; font-variant-numeric:tabular-nums; }

/* Mezcla: sacudida de toda la rejilla */
.mm-grid.shaking .mm-flipbox { animation:mmShake .28s ease-in-out 4; }
.mm-grid.shaking .mm-flipbox:nth-child(odd) { animation-delay:.07s; }
@keyframes mmShake {
  0%,100% { transform:translate(0,0) rotate(0); }
  25% { transform:translate(-4px,2px) rotate(-3deg); }
  75% { transform:translate(4px,-2px) rotate(3deg); }
}

/* Cuenta de memorización sobre la rejilla */
.mm-count-badge { position:sticky; top:8px; z-index:10; align-self:center; font-size:15px; font-weight:800;
  color:#0a141f; background:#ffd977; border-radius:20px; padding:6px 18px; box-shadow:0 4px 14px rgba(0,0,0,.35);
  display:none; }
.mm-count-badge.on { display:block; }

/* ===================== CONTROL ===================== */
.mc-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; }
.mc-tab { font-size:11.5px; font-weight:700; line-height:1.25; padding:9px 4px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:#3a3550; }
.mc-tab.sel { border-color:var(--brand1); background:var(--brand1); color:#fff; }
.mc-tab:active { transform:translateY(1px); }

.mc-sec-label { width:100%; text-align:left; font-size:12px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:-8px; }

.mc-suit-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.mc-suit-btn { height:46px; display:flex; align-items:center; justify-content:center; font-size:25px; border-radius:11px; cursor:pointer; border:1.5px solid var(--line); background:#fff; }
.mc-suit-btn.red   { color:#d6213a; }
.mc-suit-btn.black { color:#1f2330; }
.mc-suit-btn.sel { border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); }
.mc-suit-btn:active { transform:translateY(1px); }

.mc-value-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; width:100%; }
.mc-value-btn { height:38px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; border-radius:9px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:#3a3550; }
.mc-value-btn.sel { border-color:var(--brand1); background:rgba(108,92,231,.10); color:var(--brand1); box-shadow:0 0 0 2px rgba(108,92,231,.15); }
.mc-value-btn:active { transform:translateY(1px); }

.mc-pos-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; width:100%; }
.mc-pos-btn { height:32px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border-radius:8px; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:#3a3550; padding:0; }
.mc-pos-btn.sel { border-color:var(--brand1); background:var(--brand1); color:#fff; }
.mc-pos-btn:active { transform:translateY(1px); }

.mc-preview { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:56px;
  border:1.5px dashed var(--line); border-radius:14px; padding:8px; color:var(--muted); font-size:14px; font-weight:700; }
.mc-preview .big { font-size:19px; color:var(--brand1); }
.mc-preview .red { color:#d6213a; }
.mc-preview .black { color:#1f2330; }