/* Memory Match — game-specific styles (rides on playful.css) */

.game-container {
  width:100%; max-width:600px; min-height:100dvh; position:relative; margin:0 auto;
}

/* --- SCREENS --- */
.screen {
  position:absolute; inset:0; padding:24px;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(20px);
  transition:opacity 0.4s ease, transform 0.4s var(--bounce);
}
.screen.active { opacity:1; pointer-events:auto; transform:translateY(0); }

/* --- START SCREEN --- */
#startScreen { justify-content:center; align-items:center; }
.title-container { text-align:center; margin-bottom:36px; }
.game-title {
  font-family:'Astalamet', serif; font-size:52px; line-height:1;
  text-transform:uppercase; letter-spacing:-1px;
}
.title-highlight { color:var(--pink); }

.difficulty-card {
  background:var(--card); border:5px solid var(--stroke); border-radius:24px;
  padding:32px 24px; width:100%; max-width:400px; text-align:center;
  box-shadow:0 8px 0 var(--stroke);
}
.difficulty-card h3 {
  font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:22px;
}
.face-display { width:120px; height:120px; margin:0 auto 18px; position:relative; }
.face-layer {
  position:absolute; inset:0; opacity:0; transform:scale(0.9);
  transition:opacity 0.3s ease, transform 0.3s var(--bounce);
}
.face-layer.active { opacity:1; transform:scale(1); }
.difficulty-info h2 { font-size:30px; margin-bottom:4px; }
.difficulty-info p { font-size:14px; color:var(--muted); margin-bottom:22px; }

.custom-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:16px;
  background:var(--wood); border:3px solid var(--stroke); border-radius:10px;
  outline:none; margin-bottom:28px;
}
.custom-slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%;
  background:var(--blue); border:4px solid var(--stroke); cursor:pointer; transition:transform 0.1s;
}
.custom-slider::-webkit-slider-thumb:active { transform:scale(1.2); }
.custom-slider::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%; background:var(--blue); border:4px solid var(--stroke); cursor:pointer;
}

/* --- GAME SCREEN --- */
#gameScreen { padding-top:16px; }
.board-wrapper { flex:1; display:flex; justify-content:center; align-items:center; }
.game-board {
  display:grid; gap:10px; width:100%; max-width:500px; margin:0 auto; perspective:1000px;
}

/* Cards */
.memory-card { width:100%; aspect-ratio:3/4; position:relative; cursor:pointer; perspective:1000px; }
.card-inner {
  width:100%; height:100%; position:relative; transform-style:preserve-3d;
  transition:transform 0.5s var(--bounce);
}
.memory-card.flipped .card-inner { transform:rotateY(180deg); }
.memory-card.matched { pointer-events:none; }
.memory-card.matched .card-inner { animation:popMatch 0.5s var(--bounce) forwards; }
.memory-card.matched .card-front { background:var(--green); border-color:var(--stroke); border-style:solid; box-shadow:0 0 0 3px rgba(94,232,130,0.45); }
.memory-card.matched .card-icon { opacity:1; filter:none; }
.memory-card.shake { animation:shakeMismatch 0.4s ease-in-out; }

.card-face {
  position:absolute; width:100%; height:100%; backface-visibility:hidden;
  border-radius:12px; border:4px solid var(--stroke);
  display:flex; justify-content:center; align-items:center;
  box-shadow:0 4px 0 rgba(28,24,20,0.15);
}
.card-back { background:var(--blue); color:#FFF; font-size:32px; }
.card-back svg { width:50%; height:50%; fill:#FFF; }
.card-front { background:var(--card); transform:rotateY(180deg); }
.card-icon { width:60%; height:60%; }

/* Win modal icon */
.modal-icon { width:100px; height:100px; margin:0 auto; animation:floaty 2.2s ease-in-out infinite; }

@keyframes popMatch {
  0% { transform:rotateY(180deg) scale(1); }
  50% { transform:rotateY(180deg) scale(1.18); }
  100% { transform:rotateY(180deg) scale(1); }
}
@keyframes shakeMismatch {
  0%,100% { transform:rotateY(180deg) translateX(0); }
  25% { transform:rotateY(180deg) translateX(-6px); }
  75% { transform:rotateY(180deg) translateX(6px); }
}

@media (max-height: 700px) {
  .memory-card { aspect-ratio:1/1; }
  .game-board { gap:6px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-icon { animation:none; }
}