/* ================= 🧠 PHÒNG SIÊU TRÍ NHỚ (MEMORY LAB) ================= */
/* Mọi lớp mới đều có tiền tố ml- ; tái sử dụng game-card, game-opt-btn, feedback-msg... từ games.css */

.ml-card {
  overflow: hidden;
  max-width: 100%;
}

.ml-card * {
  box-sizing: border-box;
}

.ml-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 220px;
  width: 100%;
}

.ml-hidden {
  display: none !important;
}

/* Dòng trạng thái */
.ml-status {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #4C3A8F;
  background: #F3EEFF;
  border: 2px solid #E0D4FF;
  border-radius: 20px;
  padding: 8px 18px;
  text-align: center;
  max-width: 100%;
  line-height: 1.4;
}

.ml-status-pop {
  animation: mlPop 0.35s ease-out;
}

.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFF8E7;
  color: #7A5B00;
  border: 2px solid #FFE8A8;
  border-radius: 16px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
}

button.ml-chip {
  cursor: pointer;
  min-height: 40px;
}

button.ml-chip:disabled {
  opacity: 0.5;
  cursor: default;
}

.ml-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.ml-actions:empty,
.ml-next-wrap:empty {
  display: none;
}

.ml-next-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Nút chính kiểu đất sét */
.ml-big-btn,
.ml-soft-btn {
  min-height: 56px;
  padding: 12px 26px;
  border-radius: 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}

.ml-big-btn {
  background: var(--primary-purple);
  color: #fff;
  border-color: #8350E8;
  box-shadow: 0 6px 0 #6B3FD0;
}

.ml-soft-btn {
  background: #fff;
  color: #4C3A8F;
  border-color: #D9CCFF;
  box-shadow: 0 6px 0 #D9CCFF;
}

.ml-big-btn:hover,
.ml-soft-btn:hover {
  transform: translateY(-2px);
}

.ml-big-btn:active,
.ml-soft-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #6B3FD0;
}

.ml-big-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Chấm tiến độ */
.ml-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 16px;
}

.ml-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #E2E8F0;
  border: 2px solid #CBD5E0;
  transition: background 0.2s, transform 0.2s;
}

.ml-dot.done {
  background: var(--primary-green);
  border-color: #27B07F;
  transform: scale(1.15);
}

.ml-detail {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;
}

.ml-hl {
  display: inline-block;
  background: #FFE38A;
  border-radius: 10px;
  padding: 0 4px;
  animation: mlPulse 1s ease-in-out infinite;
}

/* ================= 1. SIMON NHÍ ================= */
.ml-simon-meta,
.ml-maze-meta,
.ml-nback-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ml-simon-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: min(100%, 360px);
}

.ml-simon-board.ml-pads-6 {
  grid-template-columns: repeat(3, 1fr);
  width: min(100%, 460px);
}

.ml-pad {
  aspect-ratio: 1 / 1;
  min-height: 72px;
  border-radius: 28px;
  background: var(--pad);
  border: 4px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 0 var(--pad-dark), 0 12px 18px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  filter: saturate(0.85);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ml-pad-emoji {
  font-size: clamp(2rem, 9vw, 3.2rem);
  pointer-events: none;
  opacity: 0.85;
}

.ml-pad:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 var(--pad-dark);
}

.ml-pad.lit {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.07);
  box-shadow: 0 0 0 6px #fff, 0 0 28px 10px var(--pad), 0 8px 0 var(--pad-dark);
}

.ml-pad.lit .ml-pad-emoji {
  opacity: 1;
  animation: mlWiggle 0.4s ease-in-out;
}

.ml-simon-board.ml-watching .ml-pad {
  cursor: default;
}

.ml-simon-board.ml-watching .ml-pad:not(.lit) {
  filter: saturate(0.6) brightness(0.95);
}

/* ================= 2. CÁI GÌ BIẾN MẤT? ================= */
.ml-timebar {
  width: min(100%, 420px);
  height: 12px;
  border-radius: 8px;
  background: #EDF2F7;
  overflow: hidden;
}

.ml-timebar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-green), var(--primary-yellow));
  border-radius: 8px;
  animation: mlTimebar linear forwards;
}

.ml-tray-wrap {
  position: relative;
  width: min(100%, 620px);
  border-radius: 26px;
  overflow: hidden;
}

.ml-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  min-height: 150px;
  background: linear-gradient(180deg, #FFF8E7, #FFEFD0);
  border: 4px solid #FFE0A3;
  border-radius: 26px;
}

.ml-item {
  width: 86px;
  min-height: 96px;
  background: #fff;
  border-radius: 20px;
  border: 3px solid #F4E1B8;
  box-shadow: 0 5px 0 #F0D49A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
}

.ml-item-emoji {
  font-size: 2.6rem;
  line-height: 1.1;
}

.ml-item-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6B5B3E;
  text-align: center;
  line-height: 1.2;
}

.ml-item.ml-gap {
  background: transparent;
  border: 3px dashed #E2B86A;
  box-shadow: none;
  animation: mlPulse 1.4s ease-in-out infinite;
}

.ml-item.ml-gap .ml-item-emoji {
  opacity: 0.55;
}

/* Tấm rèm sân khấu */
.ml-curtain {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(90deg, #B794F6 0 22px, #9F7AEA 22px 44px);
  border-radius: 26px;
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
  box-shadow: inset 0 -14px 0 rgba(0, 0, 0, 0.12);
}

.ml-curtain.closed {
  transform: scaleY(1);
  pointer-events: auto;
}

.ml-curtain-icon {
  font-size: 3rem;
  opacity: 0;
  transition: opacity 0.4s 0.5s;
}

.ml-curtain.closed .ml-curtain-icon {
  opacity: 1;
  animation: mlWiggle 1s ease-in-out infinite;
}

.ml-question {
  width: 100%;
}

.ml-options {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.ml-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 96px;
  padding: 10px 8px;
}

.ml-opt-emoji {
  font-size: 2.4rem;
  line-height: 1.1;
}

.ml-opt-name {
  font-size: 0.85rem;
  font-weight: 700;
}

.ml-opt:disabled {
  cursor: default;
}

.ml-reveal {
  animation: mlPulse 1s ease-in-out 3;
}

/* ================= 3. NHỚ VỊ TRÍ ================= */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 8px;
  width: min(100%, calc(var(--n) * 86px));
  padding: 10px;
  background: #EEF6FF;
  border: 4px solid #CFE6FF;
  border-radius: 24px;
}

.ml-cell {
  aspect-ratio: 1 / 1;
  min-height: 48px;
  border-radius: 16px;
  background: #fff;
  border: 3px solid #D6E6F7;
  box-shadow: 0 4px 0 #C3D8EE;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 6vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, transform 0.12s, box-shadow 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ml-cell:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #C3D8EE;
}

.ml-grid.ml-watching .ml-cell {
  cursor: default;
}

.ml-cell.ml-lit {
  background: var(--primary-yellow);
  border-color: #F2B705;
  box-shadow: 0 0 0 4px #FFF3C4, 0 0 22px 6px rgba(255, 209, 59, 0.7);
  animation: mlPop 0.35s ease-out;
  color: #7A5B00;
}

.ml-cell.ml-found {
  background: var(--primary-green);
  border-color: #27B07F;
  box-shadow: 0 4px 0 #1E9468;
  animation: mlPop 0.3s ease-out;
}

.ml-cell.ml-miss {
  background: #FFC9C9;
  border-color: #F56565;
}

.ml-cell.ml-reveal {
  background: #FFF3C4;
  border: 3px dashed #F2B705;
  color: #B7791F;
}

/* ================= 4. MẸ ĐI CHỢ ================= */
.ml-listen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ml-basket {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font-size: 4.2rem;
  line-height: 1;
  padding: 16px 26px;
  background: #FFF4E5;
  border: 4px solid #FFDDB0;
  border-radius: 32px;
  box-shadow: var(--clay-shadow);
}

.ml-mom {
  font-size: 3.2rem;
}

.ml-basket.ml-talking .ml-basket-icon {
  animation: mlBob 0.8s ease-in-out infinite;
}

.ml-basket.ml-talking .ml-mom {
  animation: mlWiggle 0.9s ease-in-out infinite;
}

.ml-shoplist-text {
  font-size: 1.2rem;
  font-weight: 800;
  color: #4C3A8F;
  background: #fff;
  border: 3px dashed #D9CCFF;
  border-radius: 18px;
  padding: 10px 18px;
  line-height: 1.7;
}

.ml-market-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ml-market-wrap:empty {
  display: none;
}

.ml-market {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  width: min(100%, 640px);
}

.ml-goods {
  position: relative;
  display: flex;
}

.ml-goods-main {
  flex: 1;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: #fff;
  border: 3px solid #E2E8F0;
  border-radius: 20px;
  box-shadow: 0 5px 0 #CBD5E0;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.12s, border-color 0.2s, background 0.2s;
  touch-action: manipulation;
}

.ml-goods-main:active {
  transform: translateY(3px);
}

.ml-goods-emoji {
  font-size: 2.4rem;
  line-height: 1.1;
}

.ml-goods-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4A5568;
  text-align: center;
  line-height: 1.2;
}

.ml-goods-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 15px;
  background: var(--primary-green);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 #1E9468;
  pointer-events: none;
}

.ml-goods-badge:empty {
  display: none;
}

.ml-goods-minus {
  position: absolute;
  top: -8px;
  left: -6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #FEB2B2;
  background: #fff;
  color: #C53030;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ml-goods.selected .ml-goods-minus {
  display: flex;
}

.ml-goods.selected .ml-goods-main {
  background: #E9FBF3;
  border-color: var(--primary-green);
  box-shadow: 0 5px 0 #27B07F;
}

.ml-goods.ml-pop .ml-goods-main {
  animation: mlPop 0.3s ease-out;
}

.ml-goods.ml-good .ml-goods-main {
  background: #DEF7EC;
  border-color: #38A169;
}

.ml-goods.ml-missed .ml-goods-main,
.ml-goods.ml-wrongqty .ml-goods-main {
  background: #FFF4E5;
  border: 3px dashed var(--primary-orange);
  animation: mlPulse 1s ease-in-out 3;
}

.ml-goods.ml-missed .ml-goods-badge,
.ml-goods.ml-wrongqty .ml-goods-badge {
  background: var(--primary-orange);
  box-shadow: 0 3px 0 #D97F00;
}

.ml-goods.ml-extra .ml-goods-main {
  background: #FDE8E8;
  border-color: #F56565;
}

.ml-goods.ml-extra .ml-goods-badge {
  background: #F56565;
  box-shadow: 0 3px 0 #C53030;
}

.ml-goods.ml-dim {
  opacity: 0.45;
}

.ml-goods.ml-good .ml-goods-minus,
.ml-goods.ml-missed .ml-goods-minus,
.ml-goods.ml-wrongqty .ml-goods-minus,
.ml-goods.ml-extra .ml-goods-minus {
  display: none;
}

.ml-subtitle {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  font-style: italic;
}

/* ================= 5. GIỐNG LÚC NÃY KHÔNG? ================= */
.ml-nback-stage {
  display: flex;
  justify-content: center;
  padding: 6px;
}

.ml-nback-card {
  width: min(62vw, 190px);
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  background: linear-gradient(160deg, #FFFFFF, #F3EEFF);
  border: 5px solid #D9CCFF;
  box-shadow: var(--clay-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.ml-nback-emoji {
  font-size: clamp(4rem, 20vw, 5.6rem);
  line-height: 1;
}

.ml-nback-card.ml-card-in {
  animation: mlFlipIn 0.35s ease-out;
}

.ml-nback-card.ml-blank {
  opacity: 0.55;
  background: #F7F5FF;
}

.ml-nback-card.ml-good-ring {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 6px #C6F6E2, var(--clay-shadow);
}

.ml-nback-card.ml-bad-ring {
  border-color: #FC8181;
  box-shadow: 0 0 0 6px #FED7D7, var(--clay-shadow);
}

.ml-nback-btns {
  display: flex;
  justify-content: center;
  gap: 14px;
  width: min(100%, 440px);
}

.ml-answer-btn {
  flex: 1;
  min-height: 64px;
  border-radius: 22px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  border: 3px solid;
  transition: transform 0.12s, opacity 0.2s;
  touch-action: manipulation;
}

.ml-answer-btn.ml-same {
  background: #E9FBF3;
  color: #1E7A55;
  border-color: #7FDDB8;
  box-shadow: 0 6px 0 #7FDDB8;
}

.ml-answer-btn.ml-diff {
  background: #FFF1F2;
  color: #B83250;
  border-color: #FDA4B4;
  box-shadow: 0 6px 0 #FDA4B4;
}

.ml-answer-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: none;
}

.ml-answer-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ml-answer-btn.ml-good-flash {
  opacity: 1;
  animation: mlPop 0.3s ease-out;
  background: var(--primary-green);
  color: #fff;
}

.ml-answer-btn.ml-bad-flash {
  opacity: 1;
  animation: mlShake 0.45s ease-in-out;
  background: #FC8181;
  color: #fff;
}

/* ================= 6. MÊ CUNG BÓNG TỐI ================= */
.ml-maze {
  --maze-size: min(100%, 440px);
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  width: var(--maze-size);
  aspect-ratio: 1 / 1;
  background: #FFF8E7;
  border: 4px solid #6B5BD6;
  border-radius: 14px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  transition: background 0.5s;
}

.ml-mcell {
  --wall: #6B5BD6;
  --floor: #FFF8E7;
  position: relative;
  background: var(--floor);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(min(84vw, 420px) / var(--n) * 0.55);
  line-height: 1;
  transition: background 0.35s, border-color 0.35s;
}

.ml-mcell.wn { border-top-color: var(--wall); }
.ml-mcell.we { border-right-color: var(--wall); }
.ml-mcell.ws { border-bottom-color: var(--wall); }
.ml-mcell.ww { border-left-color: var(--wall); }

.ml-mcell.ml-hit-n { border-top-color: #FF5E7E !important; }
.ml-mcell.ml-hit-e { border-right-color: #FF5E7E !important; }
.ml-mcell.ml-hit-s { border-bottom-color: #FF5E7E !important; }
.ml-mcell.ml-hit-w { border-left-color: #FF5E7E !important; }

.ml-maze.ml-dark {
  background: #1E2143;
  border-color: #2D3160;
}

.ml-maze.ml-dark .ml-mcell {
  --wall: #1E2143;
  --floor: #1E2143;
}

.ml-maze.ml-dark .ml-mcell.seen {
  --floor: #2E3363;
  --wall: #474D86;
}

.ml-maze.ml-dark .ml-mcell.lit {
  --floor: #FFF3C4;
  --wall: #6B5BD6;
}

.ml-maze.ml-won {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 6px #C6F6E2;
}

.ml-goal {
  animation: mlBob 1.2s ease-in-out infinite;
}

.ml-maze.ml-dark .ml-mcell:not(.lit) .ml-goal {
  opacity: 0.6;
  filter: drop-shadow(0 0 6px #FFD13B);
}

.ml-player {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.ml-player.ml-step {
  animation: mlPop 0.2s ease-out;
}

.ml-player.ml-bonk {
  animation: mlShake 0.4s ease-in-out;
}

.ml-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ml-dpad-row {
  display: flex;
  gap: 10px;
}

.ml-dpad-btn {
  width: 64px;
  height: 60px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid #D9CCFF;
  box-shadow: 0 5px 0 #D9CCFF;
  font-size: 1.7rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}

.ml-dpad-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #D9CCFF;
}

.ml-dpad-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ================= HOẠT ẢNH ================= */
.ml-shake {
  animation: mlShake 0.45s ease-in-out;
}

@keyframes mlShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

@keyframes mlPop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes mlPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes mlWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

@keyframes mlBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes mlFlipIn {
  0% { transform: rotateY(90deg) scale(0.9); opacity: 0.3; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes mlTimebar {
  from { width: 100%; }
  to { width: 0%; }
}

/* ================= ĐIỆN THOẠI NHỎ ================= */
@media (max-width: 480px) {
  .ml-stage {
    gap: 10px;
    min-height: 180px;
  }

  .ml-status {
    font-size: 1rem;
    padding: 7px 12px;
  }

  .ml-simon-board {
    gap: 12px;
  }

  .ml-simon-board.ml-pads-6 {
    gap: 10px;
  }

  .ml-pad {
    border-radius: 22px;
  }

  .ml-tray {
    gap: 8px;
    padding: 12px 8px;
  }

  .ml-item {
    width: 70px;
    min-height: 84px;
    border-radius: 16px;
  }

  .ml-item-emoji {
    font-size: 2.1rem;
  }

  .ml-options {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
  }

  .ml-opt {
    min-height: 86px;
    padding: 8px 4px;
  }

  .ml-grid {
    gap: 6px;
    padding: 6px;
  }

  .ml-cell {
    border-radius: 12px;
  }

  .ml-market {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .ml-goods-main {
    min-height: 92px;
  }

  .ml-goods-emoji {
    font-size: 2rem;
  }

  .ml-basket {
    font-size: 3.4rem;
    padding: 12px 20px;
  }

  .ml-big-btn,
  .ml-soft-btn {
    font-size: 1.05rem;
    padding: 10px 18px;
  }

  .ml-mcell {
    border-width: 1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-card *:not(.ml-timebar > span) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}