/* ==========================================================
   MEMORY SORT — estilos propios (usa la base de styles.css)
   ========================================================== */

main > .feedback { margin-bottom: 0; }

/* El tablero ocupa el alto libre, igual que en las misiones */
.mem-panel { flex: 1 0 auto; }
.mem-stage { position: relative; flex: 1; display: flex; flex-direction: column; }
.mem-board { flex: 1; font-size: 1.05rem; }
.mem-board .code-text { line-height: 2.4; }

/* ---------- Barra de tiempo para memorizar ---------- */
.mem-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sena-dark), var(--sena), var(--sena-neon));
  box-shadow: 0 0 14px rgba(111, 220, 46, 0.7);
  transition: width 0.1s linear, background 0.3s;
}
.mem-timer-fill.low {
  background: linear-gradient(90deg, #b38a00, var(--warn));
  box-shadow: 0 0 14px rgba(253, 195, 0, 0.7);
}
.mem-stars span { color: rgba(255, 255, 255, 0.18); }
.mem-stars span.on { color: var(--warn); text-shadow: 0 0 10px rgba(253, 195, 0, 0.7); }

/* ---------- Casillas y fichas ---------- */
.mem-slot {
  position: relative;
  display: inline-block;
  margin: 3px 4px;
  vertical-align: middle;
  border-radius: 10px;
  background: rgba(57, 169, 0, 0.06);
  outline: 2px dashed rgba(111, 220, 46, 0.25);
  outline-offset: 1px;
}
.mem-tile {
  position: relative;
  min-width: 70px;
  min-height: 44px;
  padding: 4px 14px;
  border-radius: 10px;
  border: 2px solid var(--sena);
  background: linear-gradient(180deg, #ffffff 0%, #eef9e7 60%, #d9f0cc 100%);
  color: var(--sena-deep);
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), 0 4px 0 var(--sena-dark), 0 6px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s, box-shadow 0.15s, background 0.2s, filter 0.3s;
}
.mem-tile:disabled { cursor: default; }
.mem-board.playing .mem-tile:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 2px 0 #fff, 0 6px 0 var(--sena-dark), 0 0 18px rgba(111, 220, 46, 0.5); }
.mem-tile.flying { z-index: 5; }
.mem-tile.is-dragging { opacity: 0.25; }

/* Seleccionada con un toque */
.mem-tile.selected {
  border-color: var(--warn);
  background: linear-gradient(180deg, #fff8d6, #ffe680);
  color: #5a4300;
  transform: translateY(-4px);
  box-shadow: inset 0 2px 0 #fff, 0 6px 0 #b38a00, 0 0 22px rgba(253, 195, 0, 0.8);
}
/* Destino al arrastrar */
.mem-tile.drag-over {
  border-color: var(--white);
  background: linear-gradient(180deg, var(--sena-light), var(--sena));
  color: var(--white);
  transform: scale(1.12);
  box-shadow: 0 0 24px rgba(140, 255, 74, 0.85);
}
/* Bloqueada (en su sitio) */
.mem-tile.locked {
  border-color: var(--sena-neon);
  background: linear-gradient(180deg, var(--sena-light), var(--sena) 60%, var(--sena-dark));
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 14px rgba(111, 220, 46, 0.45);
}
.mem-tile.locked::after {
  content: '🔒';
  position: absolute;
  top: -9px;
  right: -7px;
  font-size: 0.7rem;
}
.mem-board.solved .mem-tile.locked::after { content: none; }

/* Acomodada por Auto-fix: color mágico + insignia 🪄 */
.mem-tile.autofixed {
  border-color: #c9a7ff;
  background: linear-gradient(180deg, #b48cff, #7b4dff 60%, #5a2fd6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 16px rgba(180, 140, 255, 0.6);
}
.mem-tile.autofixed::after { content: '🪄'; }
.mem-board.solved .mem-tile.autofixed::after { content: none; }
/* Efecto al aparecer: destello que crece y se apaga */
.mem-tile.magic { animation: memMagic 1.1s ease-out; }
.mem-tile.magic::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 14px;
  border: 3px solid #e2d4ff;
  pointer-events: none;
  animation: memRing 1.1s ease-out forwards;
}
@keyframes memMagic {
  0% { transform: scale(1); filter: brightness(1); }
  25% { transform: scale(1.3) rotate(-4deg); filter: brightness(1.6); box-shadow: 0 0 40px 10px rgba(201, 167, 255, 0.9); }
  50% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes memRing {
  from { opacity: 1; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.7); }
}
/* En modo seguro: sin movimiento, solo el color morado un momento */
html[data-safe="true"] .mem-tile.magic::before { content: none; }

/* ---------- Fases ---------- */
/* Antes de empezar: borroso para no ver la respuesta */
.mem-board.covered .mem-tile { filter: blur(7px); }
/* Memorizar: las palabras brillan */
.mem-board.memorize .mem-tile {
  border-color: var(--sena-neon);
  background: linear-gradient(180deg, var(--sena-light), var(--sena) 60%, var(--sena-dark));
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 16px rgba(140, 255, 74, 0.6);
}
/* Desorden: tiemblan antes de volar */
.mem-board.scramble .mem-tile { animation: memWobble 0.5s ease-in-out; }
@keyframes memWobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg) scale(1.05); }
  40% { transform: rotate(7deg) scale(1.08); }
  60% { transform: rotate(-5deg) scale(1.05); }
  80% { transform: rotate(4deg); }
}
/* ---------- Pantalla de inicio sobre el tablero ---------- */
.mem-cover {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 12, 8, 0.55);
}
.mem-cover[hidden] { display: none; }
.mem-cover-box {
  max-width: 420px;
  padding: 22px;
  border-radius: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(111, 220, 46, 0.5);
  background: linear-gradient(165deg, rgba(10, 50, 30, 0.96), rgba(0, 30, 48, 0.97));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(57, 169, 0, 0.25);
}
.mem-cover-emoji { font-size: 2.6rem; }
.mem-cover-box p { line-height: 1.5; }
.mem-cover-box b { color: var(--sena-neon); }
.mem-cover-box .btn { min-width: 180px; font-size: 1.05rem; }

@media (max-width: 600px) {
  .mem-board { font-size: 0.92rem; }
  .mem-tile { min-width: 56px; min-height: 42px; padding: 4px 10px; font-size: 0.92rem; }
  .mem-slot { margin: 3px 2px; }
}

/* ---------- Perdió: el orden correcto se muestra en rojo suave ---------- */
.mem-board.revealed .mem-tile {
  border-color: var(--danger);
  background: linear-gradient(180deg, #fff, #ffe3e4);
  color: #8a0f14;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 #a3262b, 0 0 14px rgba(255, 90, 95, 0.45);
}
.mem-board.revealed .mem-tile.locked::after { content: none; }