/* Font Tanımlaması */
:root {
  --craft-font: 'Patrick Hand', cursive;
}

/* Genel Sayfa ve Ahşap Arka Plan */
body {
  font-family: var(--craft-font);
  background-color: #c2b280; /* Ahşap rengi */
  background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png');
  padding: 20px;
  margin: 0;
}

/* Ana Oyun Alanı (Kağıt gibi) */
.game-container {
  max-width: 800px;
  margin: auto;
  background: #fdf5e6; /* Parşömen kağıdı rengi */
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  text-align: center;
}

h1 {
  font-size: 3.5em;
  color: #8B4513; /* Koyu kahverengi */
  margin: 0;
}
.instructions {
  font-size: 1.3em;
  color: #555;
  margin: 0 0 20px 0;
}

.score-board {
  display: inline-block;
  background: #fff;
  padding: 10px 25px;
  border-radius: 50px;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  border: 3px solid #e0d6c7;
  margin-bottom: 25px;
}
.score-board span {
  color: #5cb85c;
}

/* Resimler ve Kelimelerin olduğu ana alan */
.game-area {
  background: rgba(0,0,0,0.05);
  border-radius: 10px;
  padding: 20px;
}

/* Resimler (Polaroid gibi) */
.match-image {
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #fff;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.match-image:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}
.match-image:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Bırakma Kutuları (Etiket gibi) */
.drop-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 20px 25px;
  margin: 10px;
  background: #fff8e1; /* Açık sarı */
  border: 2px dashed #d2b48c; /* Kahverengi kesikli çizgi */
  border-radius: 8px;
  min-width: 120px;
  min-height: 40px;
  font-size: 1.8em;
  transition: all 0.3s ease;
}

/* --- Geri Bildirim Stilleri --- */
.drop-box.correct {
  background: #e8f5e9; /* Açık yeşil */
  border-style: solid;
  border-color: #66bb6a; /* Koyu yeşil */
  color: #2e7d32;
  animation: pulse-green 0.4s;
}
.drop-box.incorrect {
  background: #ffebee; /* Açık kırmızı */
  animation: shake 0.5s;
}

@keyframes pulse-green {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* Form stilleri */
#end-form {
  display: none; /* JS ile görünür yapılacak */
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px dashed #d2b48c;
}
#end-form h2 { font-size: 2.5em; color: #8B4513; }
#end-form input {
  padding: 10px;
  font-size: 1.2em;
  font-family: var(--craft-font);
  border: 2px solid #d2b48c;
  border-radius: 8px;
  margin: 5px;
}
.submit-btn {
  font-family: var(--craft-font);
  padding: 10px 20px;
  font-size: 1.3em;
  background: #5cb85c;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
/* index.html'deki CSS'inize ekleyin veya güncelleyin */
.text-fallback {
  width: 100%;
  height: 100%;
  display: none; /* Başlangıçta gizli */
  align-items: center;
  justify-content: center;
  background-color: #fff8e1;
  border: 2px dashed var(--primary-color);
  border-radius: 15px;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.4rem; /* Yazı boyutu biraz büyütüldü */
  font-weight: bold;
  color: var(--text-dark);
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  text-transform: capitalize;
}
/* --- BU İKİ KURALI CSS'İNİZE EKLEYİN --- */

/* Resimlerin bulunduğu alanı esnek bir kutu yapar */
.image-bank {
    display: flex;
    flex-wrap: wrap; /* Gerekirse alt satıra kaydır */
    justify-content: center; /* Yatayda ortala */
    align-items: center; /* Dikeyde ortala */
    min-height: 150px; /* Alanın boşken çökmesini engelle */
}

/* Kelime kutularının bulunduğu alanı esnek bir kutu yapar */
.word-shelf {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 80px;
    margin-top: 20px;
    border-top: 3px dashed #ccc;
    padding-top: 20px;
}