/* Patches — Shikaku. */

.yama-alan {
  position: relative;
  width: min(94vw, 460px);
  aspect-ratio: 1;
  padding: 6px;
  border-radius: var(--kose-buyuk);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-orta);
  touch-action: none;
  --ic: 6px;
}

.yama-izgara {
  display: grid;
  gap: 1px;
  width: 100%;
  height: 100%;
  background: var(--cizgi);
  border-radius: 6px;
  overflow: hidden;
}

.yama-hucre {
  display: grid;
  place-items: center;
  background: var(--krem);
  font-family: var(--yazi-baslik);
  font-weight: 700;
  font-size: clamp(0.75rem, 3.4vw, 1.15rem);
  color: var(--komur);
}

/* Dikdörtgenler ızgaranın ÜSTÜNDE ayrı bir katmanda: hücre hücre
   boyamak yerine tek kutu çizmek hem daha hızlı hem de kenarları
   düzgün çıkıyor. Sayılar görünsün diye yarı saydamlar. */
.yama {
  position: absolute;
  border-radius: 5px;
  background: color-mix(in srgb, var(--renk) 26%, transparent);
  box-shadow: inset 0 0 0 2px var(--renk);
  pointer-events: none;                  /* silme, altındaki alandan yönetiliyor */
  transition: opacity var(--gecis-hizli);
}

.secim {
  position: absolute;
  border-radius: 5px;
  background: color-mix(in srgb, var(--vurgu) 20%, transparent);
  box-shadow: inset 0 0 0 2px var(--vurgu);
  pointer-events: none;
}

.secim[data-gecersiz='1'] {
  background: rgba(217, 45, 32, 0.16);
  box-shadow: inset 0 0 0 2px #d92d20;
}

.yama-hucre[data-kapali='1'] { background: var(--beyaz); }

.yama-alan.tamam { box-shadow: 0 0 0 3px var(--parilti), var(--golge-orta); }