/* Font Tanımlamaları */
:root {
  --title-font: 'Cinzel Decorative', cursive;
  --body-font: 'Poppins', sans-serif;
}

/* Genel Sayfa ve Arka Plan */
body {
  font-family: var(--body-font);
  background-color: #1a1a2e;
  background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
  padding: 20px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Ana Oyun Konteyneri */
.game-container {
  max-width: 800px;
  width: 100%;
  background: rgba(44, 44, 84, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 30px;
  border-radius: 20px;
  border: 2px solid rgba(106, 130, 251, 0.3);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  text-align: center;
}

h1 {
  font-family: var(--title-font);
  font-size: 3em;
  color: #fff;
  margin: 0 0 25px 0;
  text-shadow: 0 0 10px #6a82fb, 0 0 20px #fc5c7d;
}

/* İstatistik Alanı (Skor, Hamle) */
.stats-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}
.stat-box {
  background: rgba(0,0,0,0.3);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 1.2em;
  font-weight: 600;
  color: #e0e0e0;
}
.stat-box span {
  color: #ffc107;
}

/* Oyun Tahtası */
.game-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 sütunlu yapı */
  gap: 15px;
  perspective: 1000px; /* 3D efekt için */
}

/* Kartlar */
.card {
  height: 120px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

/* Kartın ön ve arka yüzü için ortak stiller */
.card::before, .card > * {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden; /* Dönüş sırasında arkayı gizle */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Kartın Arkası (::before ile oluşturuldu) */
.card::before {
  content: '?';
  font-size: 3em;
  font-family: var(--title-font);
  color: #6a82fb;
  background: linear-gradient(145deg, #2c2c54, #474787);
  border: 2px solid #6a82fb;
}

/* Kartın Ön Yüzü (içindeki resim veya yazı) */
.card > * {
  background: #fff;
  transform: rotateY(180deg);
  color: #333;
  font-size: 1.5em;
  font-weight: 600;
  padding: 5px;
}
.card img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.card .hidden { display: none; } /* JS'niz bunu kullanıyor, koruyoruz */

/* --- Animasyon ve Durum Sınıfları --- */
.card.flipped {
  transform: rotateY(180deg);
}
.card.matched {
  pointer-events: none; /* Eşleşen karta tıklamayı engelle */
  transform: rotateY(180deg);
}
.card.matched > * {
  box-shadow: 0 0 20px #50c878; /* Eşleşince yeşil parlama */
  border: 3px solid #50c878;
}

/* Oyun Sonu Modalı */
.modal-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex; justify-content: center; align-items: center; z-index: 100;
}
.modal-content {
  background: #2c2c54; color: white; padding: 40px; border-radius: 20px;
  border: 2px solid #6a82fb; text-align: center;
}
.modal-content h2 { font-family: var(--title-font); font-size: 2.5em; color: #ffc107;}
.modal-content input {
  display: block; width: 100%; padding: 10px; margin: 10px 0;
  border-radius: 8px; border: 2px solid #6a82fb; background: #1a1a2e; color: white;
}
.submit-btn, .restart-btn {
  padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer;
  font-weight: 600; margin: 10px 5px 0 5px;
}
.submit-btn { background: #50c878; color: #1a1a2e; }
.restart-btn { background: #6a82fb; color: white; }