/* Taç Yerleştir — 8×8, sekiz renkli 2×4 bölge. */

.tahta.tac {
  --n: 8;
  --tahta-bosluk: 2px;
  --tahta-ic: 6px;
}

.tac .hucre {
  border-radius: 5px;
  font-size: clamp(0.85rem, 4vw, 1.35rem);
  /* Bölge rengi doygun değil: sekiz renk yan yana duracak, hepsi tam
     doygunlukta olsaydı tahta okunmaz olurdu. Taç ve X üstlerinde
     kontrast bulabilsin diye hepsi açık ton. */
  background: var(--bolge);
  box-shadow: inset 0 0 0 1px rgba(28, 27, 31, 0.08);
}

.tac .hucre[data-bolge='0'] { --bolge: #fde2e1; }
.tac .hucre[data-bolge='1'] { --bolge: #fdefd4; }
.tac .hucre[data-bolge='2'] { --bolge: #e6f4d8; }
.tac .hucre[data-bolge='3'] { --bolge: #d6f0ec; }
.tac .hucre[data-bolge='4'] { --bolge: #dbe7fb; }
.tac .hucre[data-bolge='5'] { --bolge: #e6dcf7; }
.tac .hucre[data-bolge='6'] { --bolge: #fbdcef; }
.tac .hucre[data-bolge='7'] { --bolge: #e9e4dc; }

.tac .hucre[data-durum='1'] { color: var(--sonuk); font-size: 0.8rem; }
.tac .hucre[data-durum='2'] { color: var(--komur); }

.tac .hucre[data-verilen='1'] {
  box-shadow: inset 0 0 0 2px var(--murekkep);
  cursor: default;
}

/* Çakışan taçlar: hangi ikisinin çakıştığını göstermek, "bir yerde
   hata var" demekten çok daha kullanışlı. */
.tac .hucre.cakisma {
  background: #fee4e2;
  box-shadow: inset 0 0 0 2px #d92d20;
}

.tac.tamam .hucre[data-durum='2'] { animation: tacParla 700ms ease-out; }

@keyframes tacParla {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.efsane {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--komur-yumusak);
}
.efsane span { display: inline-flex; align-items: center; gap: 5px; }