/* Karakter Sudoku — 4×4, 2×2 bloklar. */

.tahta.sudoku {
  --n: 4;
  --tahta-bosluk: 4px;
  width: min(88vw, 380px);
}

.sudoku .hucre {
  position: relative;
  font-size: clamp(1.4rem, 8vw, 2.1rem);
  background: var(--beyaz);
  box-shadow: inset 0 0 0 1px var(--cizgi);
}

/* 2×2 blok sınırı: hücrelerin dış kenarına kalın çizgi. Ayrı bir
   sarmalayıcı yerine hücrenin kendi kenarlığı — ızgara tek katman
   kalıyor, hizalama sorunu çıkmıyor. */
.sudoku .hucre[data-blok-sag='1'] { margin-right: 4px; }
.sudoku .hucre[data-blok-alt='1'] { margin-bottom: 4px; }

.sudoku .hucre[data-kilit='1'] {
  background: var(--murekkep);
  color: var(--beyaz);
  cursor: default;
}

.sudoku .hucre.secili {
  background: var(--vurgu-yumusak);
  box-shadow: inset 0 0 0 3px var(--vurgu);
}

.sudoku .hucre[data-kilit='1'].secili { background: var(--murekkep); }

/* Aynı satır/sütun/blok — seçili hücrenin etki alanı soluk vurgulu. */
.sudoku .hucre.alan { background: var(--krem-koyu); }

.sudoku .hucre.cakisma { color: #d92d20; }
.sudoku .hucre[data-kilit='1'].cakisma { color: #ff8c84; }

/* Notlar: hücrenin dört köşesine küçük semboller. */
.notlar {
  position: absolute;
  inset: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--sonuk);
  pointer-events: none;
}
.notlar span { display: grid; place-items: center; }

.palet {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.palet__dugme {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--kose-orta);
  background: var(--beyaz);
  box-shadow: var(--golge-dugme);
  cursor: pointer;
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli), background var(--gecis-hizli);
  touch-action: manipulation;
}

.palet__dugme:active { transform: translateY(2px); box-shadow: var(--golge-dugme-basili); }

/* Sembol tükendi (dörtte dördü yerleşti) → sönük ama tıklanabilir
   kalıyor; yanlış yerleştirmeyi engellemek oyuncunun işi. */
.palet__dugme[data-bitti='1'] { opacity: 0.35; }

.sudoku.tamam .hucre { animation: parla 620ms ease-out; }
@keyframes parla {
  0% { box-shadow: inset 0 0 0 1px var(--cizgi); }
  50% { box-shadow: inset 0 0 0 3px var(--vurgu); }
  100% { box-shadow: inset 0 0 0 1px var(--cizgi); }
}