/* Glitch Minesweeper — terminal teması.
 *
 * Koyu zemin bu oyuna özel: sayılar tek bilgi kaynağı ve kontrastı
 * yüksek monospace rakamlarla en okunur burada. */

.tarla {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: var(--kose-orta);
  background: #0d1117;
  box-shadow: var(--golge-orta), inset 0 0 60px rgba(22, 163, 74, 0.06);
  touch-action: manipulation;
  max-width: 96vw;
  overflow: auto;
}

.gozenek {
  width: var(--boy, 34px);
  height: var(--boy, 34px);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: #1c2430;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #d5f5e0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  font-size: calc(var(--boy, 34px) * 0.5);
  cursor: pointer;
  user-select: none;
  transition: background 90ms linear;
}

.gozenek:hover:not([data-acik='1']) { background: #26313f; }

.gozenek[data-acik='1'] {
  background: #10161f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: default;
}

.gozenek[data-bayrak='1'] { color: #fbbf24; }

/* Komşu sayısı renkleri — klasik mayın tarlası kodlaması, terminal
   paletine çevrilmiş hali. */
.gozenek[data-sayi='1'] { color: #60a5fa; }
.gozenek[data-sayi='2'] { color: #4ade80; }
.gozenek[data-sayi='3'] { color: #f87171; }
.gozenek[data-sayi='4'] { color: #c084fc; }
.gozenek[data-sayi='5'] { color: #fb923c; }
.gozenek[data-sayi='6'] { color: #22d3ee; }
.gozenek[data-sayi='7'] { color: #e5e7eb; }
.gozenek[data-sayi='8'] { color: #9ca3af; }

.gozenek[data-virus='patladi'] { background: #7f1d1d; color: #fff; }
.gozenek[data-virus='acik'] { background: #2b1414; color: #f87171; }

/* Kaybetme efekti: RGB kayması + tarama çizgileri. Yalnız 700ms,
   sürekli çalışsa okunabilirliği bitirirdi. */
.tarla.glitch { animation: glitch 620ms steps(2, end) 2; }

@keyframes glitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-3px, 1px); filter: hue-rotate(80deg) saturate(2); }
  40% { transform: translate(3px, -2px); filter: invert(0.12); }
  60% { transform: translate(-2px, -1px); filter: hue-rotate(-60deg); }
  80% { transform: translate(2px, 2px); filter: saturate(3); }
  100% { transform: translate(0); filter: none; }
}

.tarla.kazandi .gozenek[data-virus] { background: #14532d; color: #86efac; }

.ipucu-metin { font-size: 0.82rem; color: var(--sonuk); text-align: center; margin: 0; }