.memory-wrap{
  width:100%;
  display:grid;
  gap:16px;
}

.memory-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:#fffa85;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 12px;
}

.memory-setup,
.memory-stats{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.memory-setup label{
  font-weight:900;
  text-transform:uppercase;
  font-size:.82rem;
}

.memory-setup select{
  border:2px solid var(--line);
  border-radius:10px;
  background:white;
  color:var(--line);
  padding:8px 10px;
  font-weight:900;
}

.memory-btn{
  border:2px solid var(--line);
  border-radius:12px;
  background:#ffd32a;
  color:var(--line);
  box-shadow:3px 3px 0 var(--line);
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
  font-size:.86rem;
}

.memory-btn.primary{
  background:#2ed573;
}

.memory-btn.danger{
  background:#ff4757;
  color:white;
}

.memory-btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--line);
}

.memory-pill{
  background:white;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:3px 3px 0 var(--line);
  padding:7px 10px;
  font-weight:900;
  font-size:.86rem;
}

.memory-message{
  min-height:48px;
  text-align:center;
  font-size:.98rem;
  font-weight:900;
  color:#111;
  background:#ff9ff3;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.memory-board{
  display:grid;
  gap:12px;
  margin:0 auto;
  width:min(100%,760px);
}

.memory-board.easy{
  grid-template-columns:repeat(4,1fr);
  max-width:560px;
}

.memory-board.medium{
  grid-template-columns:repeat(4,1fr);
  max-width:650px;
}

.memory-board.hard{
  grid-template-columns:repeat(5,1fr);
  max-width:780px;
}

.memory-card{
  aspect-ratio:1 / 1.18;
  border:0;
  background:transparent;
  cursor:pointer;
  perspective:900px;
  padding:0;
}

.memory-card:disabled{
  cursor:default;
}

.memory-card-inner{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform .34s ease;
}

.memory-card.revealed .memory-card-inner,
.memory-card.matched .memory-card-inner{
  transform:rotateY(180deg);
}

.memory-card-face{
  position:absolute;
  inset:0;
  border:3px solid var(--line);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--line);
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.memory-card-back{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.35), transparent 25%),
    repeating-linear-gradient(45deg,#ff4757 0,#ff4757 12px,#ff6b81 12px,#ff6b81 24px);
  color:white;
  font-size:2rem;
}

.memory-card-front{
  transform:rotateY(180deg);
  background:#fff;
  font-size:clamp(2rem,6vw,4rem);
}

.memory-card.matched .memory-card-front{
  background:#2ed573;
}

.memory-card.wrong .memory-card-inner{
  animation:memoryWrong .22s linear 0s 3;
}

.memory-finished{
  animation:memoryWinPulse .55s ease-in-out infinite alternate;
}

@keyframes memoryWrong{
  0%{transform:rotateY(180deg) translateX(0)}
  33%{transform:rotateY(180deg) translateX(-5px)}
  66%{transform:rotateY(180deg) translateX(5px)}
  100%{transform:rotateY(180deg) translateX(0)}
}

@keyframes memoryWinPulse{
  from{filter:brightness(1)}
  to{filter:brightness(1.12)}
}

.game-frame{
  padding:14px !important;
}

@media(max-width:760px){
  .memory-board.easy,
  .memory-board.medium,
  .memory-board.hard{
    grid-template-columns:repeat(4,1fr);
  }

  .memory-card-face{
    border-radius:14px;
  }
}

@media(max-width:480px){
  .memory-board.easy,
  .memory-board.medium,
  .memory-board.hard{
    gap:8px;
  }

  .memory-card-face{
    border-width:2px;
    box-shadow:3px 3px 0 var(--line);
  }
}

.memory-board.extreme{
  grid-template-columns:repeat(10,1fr);
  max-width:980px;
  gap:8px;
}

.memory-board.extreme .memory-card-face{
  border-radius:12px;
  box-shadow:3px 3px 0 var(--line);
}

.memory-board.extreme .memory-card-front{
  font-size:clamp(1.35rem,3vw,2.2rem);
}

.memory-board.extreme .memory-card-back{
  font-size:1.35rem;
}

@media(max-width:900px){
  .memory-board.extreme{
    grid-template-columns:repeat(5,1fr);
    max-width:620px;
  }
}

@media(max-width:520px){
  .memory-board.extreme{
    grid-template-columns:repeat(5,1fr);
    gap:6px;
  }

  .memory-board.extreme .memory-card-face{
    border-width:2px;
    border-radius:9px;
    box-shadow:2px 2px 0 var(--line);
  }

  .memory-board.extreme .memory-card-front{
    font-size:1.25rem;
  }
}