/* CSS ROOT DEĞİŞKENLERİ - Tüm sayfada kullanılacak renk ve stil değişkenleri */
:root {
  --bg: #0b1020;
  /* Ana arka plan rengi (koyu mavi-siyah) */
  --card: rgba(255, 255, 255, .06);
  /* Kart arka plan rengi (hafif beyaz, %6 opaklık) */
  --border: rgba(255, 255, 255, .12);
  /* Kenar çizgisi rengi (hafif beyaz, %12 opaklık) */
  --text: #e9ecff;
  /* Ana metin rengi (açık mavi-beyaz) */
  --muted: #a9b1d6;
  /* Soluk metin rengi (gri-mavi) */
  --accent: #7aa2f7;
  /* Vurgu rengi (mavi) */
  --win: #9ece6a;
  /* Kazanma rengi (yeşil) */
  --lose: #f7768e;
  /* Kaybetme rengi (kırmızı-pembe) */
  --shadow: 0 16px 50px rgba(0, 0, 0, .38);
  /* Gölge efekti (yumuşak siyah gölge) */
  --r: 18px;
  /* Varsayılan border-radius değeri (yuvarlaklık) */
}

/* EVRENSEL KUTU MODELİ AYARI */
* {
  box-sizing: border-box;
  /* Padding ve border'ı genişliğe dahil et (modern CSS kutu modeli) */
}

/* BODY (SAYFA GÖVDE) STİLLERİ */
body {
  margin: 0;
  /* Tarayıcı varsayılan margin'lerini sıfırla */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Sistem fontları kullan (modern ve okunaklı) */
  background:
    /* Gradient arka plan kombinasyonu */
    radial-gradient(1200px 600px at 30% 10%, #172554 0%, transparent 55%),
    /* İlk radial gradient (mavi, sol üst) */
    radial-gradient(900px 500px at 70% 30%, #2b1249 0%, transparent 50%),
    /* İkinci radial gradient (mor, sağ) */
    var(--bg);
  /* Ana arka plan rengi (en altta) */
  color: var(--text);
  /* Metin rengi (açık) */
  padding: 22px;
  /* Dış kenar boşluğu (tüm taraflar) */
}

/* ANA UYGULAMA CONTAINER */
.app {
  width: min(1200px, 100%);
  /* Maksimum 1200px genişlik, daha küçük ekranlarda %100 genişlik */
  margin: 0 auto;
  /* Yatay ortala */
  display: grid;
  /* CSS Grid layout kullan */
  gap: 16px;
  /* Grid öğeleri arası boşluk */
}

/* ÜST BAŞLIK BÖLÜMÜ */
.top h1 {
  margin: 0 0 6px 0;
  /* Alt margin 6px, diğerleri 0 */
  font-size: 26px;
  /* Font boyutu */
}

/* ALT BAŞLIK */
.sub {
  margin: 0;
  /* Margin'leri sıfırla */
  color: var(--muted);
  /* Soluk renk kullan */
}

/* GENEL PANEL STİLİ */
.panel {
  border: 1px solid var(--border);
  /* İnce kenar çizgisi */
  border-radius: var(--r);
  /* Yuvarlatılmış köşeler */
  background: var(--card);
  /* Hafif şeffaf arka plan */
  box-shadow: var(--shadow);
  /* Gölge efekti */
  overflow: hidden;
  /* Taşan içeriği gizle */
}

/* OYUN PANELİ LAYOUT */
.game {
  display: grid;
  /* CSS Grid kullan */
  grid-template-columns: 1fr 1fr;
  /* İki eşit sütun (sol ve sağ) */
}

/* SOL BÖLÜM (OYUN ALANI) */
.left {
  padding: 18px;
  /* İç boşluk */
  border-right: 1px solid var(--border);
  /* Sağ kenar çizgisi */
  background: rgba(0, 0, 0, .10);
  /* Koyu şeffaf arka plan */
  display: grid;
  /* Grid layout */
  gap: 14px;
  /* Öğeler arası boşluk */
}

/* SAĞ BÖLÜM (KONTROLLER) */
.right {
  padding: 18px;
  /* İç boşluk */
  display: grid;
  /* Grid layout */
  gap: 14px;
  /* Öğeler arası boşluk */
}

/* GRID SARMALAYICI */
.grid-wrap {
  position: relative;
  /* İçindeki absolute elementler için referans */
  padding: 14px;
  /* İç boşluk */
  border-radius: var(--r);
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .18);
  /* Koyu şeffaf arka plan */
}

/* SLOT MAKİNESİ GRİDİ */
.grid {
  display: grid;
  /* CSS Grid */
  grid-template-columns: repeat(5, 1fr);
  /* 5 eşit sütun (5 reel) */
  gap: 12px;
  /* Hücreler arası boşluk */
  position: relative;
  /* Katman kontrolü için */
  z-index: 1;
  /* SVG çizgilerinin altında olması için */
}

/* SLOT HÜCRE STİLİ */
.cell {
  height: 120px;
  /* Sabit yükseklik */
  border-radius: 16px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .20));
  /* Yukarıdan aşağıya gradient (3D efekti) */
  display: flex;
  /* Flexbox kullan */
  align-items: center;
  /* Dikey ortala */
  justify-content: center;
  /* Yatay ortala */
  position: relative;
  /* Pseudo-element için referans */
  overflow: hidden;
  /* Taşan içeriği gizle */
}

/* HÜCRE PARLAMA EFEKTİ */
.cell::before {
  content: "";
  /* Boş içerik (görünmez element) */
  position: absolute;
  /* Hücre içinde konumlandır */
  inset: 0;
  /* Tüm kenarları kapsasın (top, right, bottom, left: 0) */
  background: radial-gradient(260px 90px at 50% 25%, rgba(255, 255, 255, .12), transparent 60%);
  /* Üstten parlama efekti */
  pointer-events: none;
  /* Tıklamaları engellemez */
}

/* SEMBOL (EMOJI) STİLİ */
.sym {
  font-size: 58px;
  /* Büyük emoji boyutu */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  /* Gölge efekti */
  transition: transform 0.1s;
  /* Dönüşüm animasyonu için yumuşak geçiş */
}

/* DÖNEN REEL ANİMASYONU */
.reel-spin {
  animation: blurSpin 0.2s infinite linear;
  /* Sonsuz döngü animasyonu */
  opacity: 0.85;
  /* Hafif saydamlık */
  filter: blur(1px);
  /* Hafif bulanıklık (hareket hissi) */
}

/* REEL DÖNÜŞ ANİMASYONU TANIMLAMA */
@keyframes blurSpin {
  0% {
    /* Başlangıç */
    transform: translateY(-5px) scale(0.95);
    /* Yukarı hareket ve küçült */
  }

  50% {
    /* Orta nokta */
    transform: translateY(5px) scale(1.05);
    /* Aşağı hareket ve büyüt */
  }

  100% {
    /* Bitiş */
    transform: translateY(-5px) scale(0.95);
    /* Yukarı hareket ve küçült (döngü tamamlandı) */
  }
}

/* KAZANAN ÇİZGİLER SVG CONTAINER */
.paylines-svg {
  position: absolute;
  /* Grid-wrap içinde konumlandır */
  top: 0;
  /* Üstten 0 */
  left: 0;
  /* Soldan 0 */
  width: 100%;
  /* Tam genişlik */
  height: 100%;
  /* Tam yükseklik */
  pointer-events: none;
  /* Tıklamaları engelle (alttaki hücrelere izin ver) */
  z-index: 10;
  /* Grid'in üstünde görünsün */
  overflow: visible;
  /* Taşan SVG çizgilerini göster */
}

/* KAZANAN ÇİZGİ STILI */
.payline-path {
  fill: none;
  /* İç dolgu yok (sadece çizgi) */
  stroke-width: 5;
  /* Çizgi kalınlığı */
  stroke: rgba(255, 215, 0, 0.9);
  /* Altın sarısı renk */
  stroke-linecap: round;
  /* Yuvarlatılmış çizgi uçları */
  stroke-linejoin: round;
  /* Yuvarlatılmış birleşim noktaları */
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
  /* Parlama efekti */
  animation: drawLine 0.6s ease-out forwards;
  /* Çizim animasyonu */
}

/* ÇİZGİ ÇİZİM ANİMASYONU */
@keyframes drawLine {
  from {
    /* Başlangıç */
    stroke-dasharray: 1000;
    /* Kesikli çizgi dizisi */
    stroke-dashoffset: 1000;
    /* Çizgi tamamen gizli */
  }

  to {
    /* Bitiş */
    stroke-dasharray: 1000;
    /* Aynı dizi */
    stroke-dashoffset: 0;
    /* Çizgi tamamen görünür (çizilmiş gibi) */
  }
}

/* MESAJ KUTUSU */
.message {
  padding: 12px 14px;
  /* İç boşluk */
  border-radius: 14px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .18);
  /* Koyu şeffaf arka plan */
  display: flex;
  /* Flexbox */
  align-items: center;
  /* Dikey ortala */
  gap: 10px;
  /* Öğeler arası boşluk */
  min-height: 52px;
  /* Minimum yükseklik */
}

/* DURUM İNDİKATÖR NOKTASI */
.dot {
  width: 10px;
  /* Genişlik */
  height: 10px;
  /* Yükseklik */
  border-radius: 50%;
  /* Tam yuvarlak */
  background: var(--muted);
  /* Varsayılan renk (gri) */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
  /* Dış halka efekti */
}

/* KAZANMA DURUMU NOKTASI */
.message.win .dot {
  background: var(--win);
  /* Yeşil renk */
  box-shadow: 0 0 0 4px rgba(158, 206, 106, .16);
  /* Yeşil halka */
}

/* KAYBETME DURUMU NOKTASI */
.message.lose .dot {
  background: var(--lose);
  /* Kırmızı renk */
  box-shadow: 0 0 0 4px rgba(247, 118, 142, .14);
  /* Kırmızı halka */
}

/* SCATTER DURUMU NOKTASI */
.message.scatter .dot {
  background: gold;
  /* Altın rengi */
  box-shadow: 0 0 0 4px rgba(255, 215, 0, .3);
  /* Altın halka */
  animation: scatterPulse 0.5s ease-in-out infinite alternate;
  /* Nabız animasyonu */
}

/* SCATTER NOKTA NABIZ ANİMASYONU */
@keyframes scatterPulse {
  from {
    /* Başlangıç */
    transform: scale(1);
    /* Normal boyut */
    box-shadow: 0 0 0 4px rgba(255, 215, 0, .3);
    /* Normal gölge */
  }

  to {
    /* Bitiş */
    transform: scale(1.3);
    /* %30 büyüme */
    box-shadow: 0 0 12px 6px rgba(255, 215, 0, .5);
    /* Genişleyen gölge */
  }
}

/* MESAJ İÇİNDEKİ SPAN METNİ */
.message span {
  color: var(--muted);
  /* Soluk renk */
}

/* SCATTER SEMBOL VURGULAMA EFEKTİ */
.scatter-highlight {
  animation: scatterGlow 0.8s ease-in-out infinite alternate;
  /* Parlama animasyonu */
  border-color: gold !important;
  /* Altın kenar rengi (önemli) */
  box-shadow:
    /* Çoklu gölge efekti */
    0 0 20px rgba(255, 215, 0, 0.6),
    /* İç parlama */
    0 0 40px rgba(255, 215, 0, 0.3),
    /* Orta parlama */
    inset 0 0 15px rgba(255, 215, 0, 0.2) !important;
  /* İç gölge (önemli) */
}

/* SCATTER PARLAMA ANİMASYONU */
@keyframes scatterGlow {
  from {
    /* Başlangıç */
    transform: scale(1);
    /* Normal boyut */
    border-color: gold;
    /* Altın kenar */
    box-shadow:
      /* Parlama başlangıç */
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 215, 0, 0.3);
  }

  to {
    /* Bitiş */
    transform: scale(1.05);
    /* %5 büyüme */
    border-color: #ffec8b;
    /* Daha açık altın */
    box-shadow:
      /* Daha güçlü parlama */
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 60px rgba(255, 215, 0, 0.5);
  }
}

/* SCATTER SEMBOL NABIZ EFEKTİ */
.scatter-highlight .sym {
  animation: scatterSymbolPulse 0.6s ease-in-out infinite alternate;
  /* Sembol animasyonu */
}

/* SCATTER SEMBOL ANİMASYONU */
@keyframes scatterSymbolPulse {
  from {
    /* Başlangıç */
    transform: scale(1) rotate(-5deg);
    /* Normal boyut, sola 5 derece */
    filter: drop-shadow(0 0 10px gold);
    /* Altın gölge */
  }

  to {
    /* Bitiş */
    transform: scale(1.15) rotate(5deg);
    /* %15 büyüme, sağa 5 derece */
    filter: drop-shadow(0 0 20px gold) brightness(1.2);
    /* Daha güçlü gölge ve parlaklık */
  }
}

/* FREE SPIN MODU GRİD KENARI */
.grid-wrap.free-spin-mode {
  border-color: gold;
  /* Altın kenar rengi */
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  /* Altın parlama */
  animation: freeSpinBorder 1s ease-in-out infinite alternate;
  /* Sınır animasyonu */
}

/* FREE SPIN KENAR ANİMASYONU */
@keyframes freeSpinBorder {
  from {
    /* Başlangıç */
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    /* Normal gölge */
  }

  to {
    /* Bitiş */
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.7);
    /* Daha güçlü gölge */
  }
}

/* İSTATİSTİK KARTLARI CONTAINER */
.stats {
  display: grid;
  /* Grid layout */
  gap: 12px;
  /* Kartlar arası boşluk */
}

/* TEK İSTATİSTİK KARTI */
.stat {
  display: flex;
  /* Flexbox */
  justify-content: space-between;
  /* Başlık ve değeri iki yana yaslama */
  gap: 12px;
  /* Aralarında boşluk */
  padding: 12px 14px;
  /* İç boşluk */
  border-radius: 14px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .18);
  /* Koyu şeffaf arka plan */
  align-items: center;
  /* Dikey ortala */
}

/* FREE SPIN İSTATİSTİK KARTI */
.stat.free-spin-stat {
  border-color: gold;
  /* Altın kenar */
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 165, 0, 0.1));
  /* Altın gradient arka plan */
  animation: freeSpinStatGlow 0.8s ease-in-out infinite alternate;
  /* Parlama animasyonu */
}

/* FREE SPIN KART BAŞLIĞI */
.stat.free-spin-stat .k {
  color: gold;
  /* Altın rengi */
  font-weight: bold;
  /* Kalın font */
}

/* FREE SPIN KART DEĞERİ */
.stat.free-spin-stat .v {
  color: gold;
  /* Altın rengi */
  font-size: 1.2em;
  /* Daha büyük font */
}

/* FREE SPIN KART PARLAMA ANİMASYONU */
@keyframes freeSpinStatGlow {
  from {
    /* Başlangıç */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    /* Hafif gölge */
  }

  to {
    /* Bitiş */
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    /* Güçlü gölge */
  }
}

/* GİZLE SINIFI */
.hidden {
  display: none !important;
  /* Tamamen gizle (önemli) */
}

/* İSTATİSTİK KART BAŞLIĞI (KEY) */
.stat .k {
  color: var(--muted);
  /* Soluk renk */
  font-size: 12px;
  /* Küçük font */
}

/* İSTATİSTİK KART DEĞERİ (VALUE) */
.stat .v {
  font-weight: 800;
  /* Çok kalın font */
}

/* İSTATİSTİK KART İÇİNDEKİ INPUT */
.stat input {
  width: 120px;
  /* Sabit genişlik */
  padding: 8px 10px;
  /* İç boşluk */
  border-radius: 12px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .22);
  /* Koyu arka plan */
  color: var(--text);
  /* Açık metin rengi */
  outline: none;
  /* Varsayılan outline'ı kaldır */
  font-weight: 800;
  /* Kalın font */
}

/* INPUT FOCUS DURUMU */
.stat input:focus {
  border-color: rgba(122, 162, 247, .55);
  /* Mavi kenar */
  box-shadow: 0 0 0 3px rgba(122, 162, 247, .18);
  /* Mavi halka efekti */
}

/* MİNİ YARDIMCI METİN */
.mini {
  color: var(--muted);
  /* Soluk renk */
  font-size: 12px;
  /* Küçük font */
  margin-top: 6px;
  /* Üst boşluk */
  font-weight: 650;
  /* Orta kalın */
}

/* BUTONLAR CONTAINER */
.buttons {
  display: flex;
  /* Flexbox */
  gap: 10px;
  /* Butonlar arası boşluk */
  flex-wrap: wrap;
  /* Satır sonunda alt satıra geç */
  align-items: center;
  /* Dikey ortala */
}

/* GENEL BUTON STİLİ */
button {
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(122, 162, 247, .20);
  /* Mavi şeffaf arka plan */
  color: var(--text);
  /* Açık metin */
  padding: 10px 14px;
  /* İç boşluk */
  border-radius: 14px;
  /* Yuvarlatılmış köşeler */
  cursor: pointer;
  /* El işareti cursor */
  font-weight: 800;
  /* Kalın font */
  letter-spacing: .2px;
  /* Harf aralığı */
  transition: transform .06s ease, background .2s ease;
  /* Geçiş animasyonları */
  user-select: none;
  /* Metin seçilemesin */
}

/* BUTON HOVER (ÜSTÜNE GELME) DURUMU */
button:hover {
  background: rgba(122, 162, 247, .28);
  /* Daha koyu mavi */
}

/* BUTON ACTIVE (TIKLANMA) DURUMU */
button:active {
  transform: translateY(1px);
  /* 1 piksel aşağı kaydır (basılma hissi) */
}

/* MODAL (POPUP) PENCERE */
.modal {
  position: fixed;
  /* Ekran üzerinde sabit konum */
  top: 0;
  /* Üstten 0 */
  left: 0;
  /* Soldan 0 */
  width: 100%;
  /* Tam genişlik */
  height: 100%;
  /* Tam yükseklik */
  background: rgba(0, 0, 0, 0.85);
  /* Koyu şeffaf arka plan */
  display: flex;
  /* Flexbox */
  align-items: center;
  /* Dikey ortala */
  justify-content: center;
  /* Yatay ortala */
  z-index: 1000;
  /* En üstte görünsün */
  backdrop-filter: blur(5px);
  /* Arka plan bulanıklığı */
}

/* GİZLİ MODAL */
.modal.hidden {
  display: none;
  /* Gizle */
}

/* MODAL İÇERİK KUTUSU */
.modal-content {
  background: #2a2a35;
  /* Koyu gri arka plan */
  padding: 2rem;
  /* İç boşluk */
  border-radius: 12px;
  /* Yuvarlatılmış köşeler */
  width: 90%;
  /* %90 genişlik */
  max-width: 400px;
  /* Maksimum 400px */
  border: 1px solid #444;
  /* Gri kenar */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  /* Gölge */
  color: #fff;
  /* Beyaz metin */
}

/* MODAL BAŞLIĞI */
.modal-content h2 {
  margin-top: 0;
  /* Üst margin yok */
  margin-bottom: 1.5rem;
  /* Alt margin */
  color: #eebb00;
  /* Altın sarısı */
}

/* MODAL SATIR DÜZENI */
.modal-content .row {
  display: flex;
  /* Flexbox */
  flex-direction: column;
  /* Dikey sıralama */
  gap: 0.5rem;
  /* Öğeler arası boşluk */
  margin-bottom: 1rem;
  /* Alt margin */
}

/* MODAL RANGE INPUT */
.modal-content input[type="range"] {
  width: 100%;
  /* Tam genişlik */
  cursor: pointer;
  /* El işareti */
}

/* MODAL SELECT DROPDOWN */
.modal-content select {
  padding: 0.5rem;
  /* İç boşluk */
  background: #111;
  /* Çok koyu arka plan */
  color: #fff;
  /* Beyaz metin */
  border: 1px solid #555;
  /* Gri kenar */
  border-radius: 4px;
  /* Hafif yuvarlatılmış köşeler */
}

/* SECONDARYİKİNCİL BUTON STİLİ */
button.secondary {
  background: rgba(255, 255, 255, .06);
  /* Beyaz şeffaf arka plan */
}

/* SECONDARYİKİNCİL BUTON HOVER */
button.secondary:hover {
  background: rgba(255, 255, 255, .10);
  /* Daha belirgin beyaz */
}

/* AKTİF OLMAYAN (DİSABLED) BUTON */
button:disabled {
  opacity: .55;
  /* %55 opaklık (soluk) */
  cursor: not-allowed;
  /* Yasak işareti cursor */
}

/* SELECT DROPDOWN */
.select {
  padding: 10px 12px;
  /* İç boşluk */
  border-radius: 14px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .18);
  /* Koyu şeffaf arka plan */
  color: var(--text);
  /* Açık metin */
  font-weight: 800;
  /* Kalın font */
  outline: none;
  /* Varsayılan outline'ı kaldır */
}

/* SELECT FOCUS DURUMU */
.select:focus {
  border-color: rgba(122, 162, 247, .55);
  /* Mavi kenar */
  box-shadow: 0 0 0 3px rgba(122, 162, 247, .18);
  /* Mavi halka */
}

/* KREDİ EKLEME BÖLÜMÜ */
.creditAdd {
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  border-radius: 16px;
  /* Yuvarlatılmış köşeler */
  background: rgba(0, 0, 0, .10);
  /* Hafif şeffaf arka plan */
  padding: 14px;
  /* İç boşluk */
  display: grid;
  /* Grid layout */
  gap: 10px;
  /* Öğeler arası boşluk */
}

/* İKİNCİL PANEL (MATEMATİK VE İSTATİSTİKLER) */
.panel2 {
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  border-radius: 16px;
  /* Yuvarlatılmış köşeler */
  background: rgba(0, 0, 0, .10);
  /* Hafif şeffaf arka plan */
  padding: 14px;
  /* İç boşluk */
  display: grid;
  /* Grid layout */
  gap: 14px;
  /* Öğeler arası boşluk */
}

/* İKİNCİL PANEL BAŞLIĞI */
.panel2 h2 {
  margin: 0;
  /* Margin'leri sıfırla */
  font-size: 16px;
  /* Font boyutu */
}

/* İÇ KUTU */
.box {
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  border-radius: 16px;
  /* Yuvarlatılmış köşeler */
  background: rgba(0, 0, 0, .14);
  /* Koyu şeffaf arka plan */
  padding: 14px;
  /* İç boşluk */
}

/* KUTU BAŞLIĞI */
.box h3 {
  margin: 0 0 10px 0;
  /* Sadece alt margin */
  font-size: 14px;
  /* Font boyutu */
}

/* SATIR DÜZENİ */
.row {
  display: grid;
  /* Grid layout */
  gap: 6px;
  /* Öğeler arası boşluk */
}

/* SATIR ETİKETİ */
.row label {
  color: var(--muted);
  /* Soluk renk */
  font-size: 12px;
  /* Küçük font */
}

/* SATIR INPUT */
.row input {
  padding: 10px 12px;
  /* İç boşluk */
  border-radius: 12px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .20);
  /* Koyu arka plan */
  color: var(--text);
  /* Açık metin */
  outline: none;
  /* Varsayılan outline'ı kaldır */
  font-weight: 800;
  /* Kalın font */
}

/* SATIR INPUT FOCUS */
.row input:focus {
  border-color: rgba(122, 162, 247, .55);
  /* Mavi kenar */
  box-shadow: 0 0 0 3px rgba(122, 162, 247, .18);
  /* Mavi halka */
}

/* TABLO STİLİ */
.table {
  width: 100%;
  /* Tam genişlik */
  border-collapse: collapse;
  /* Kenarları birleştir */
  border: 1px solid var(--border);
  /* Dış kenar */
  border-radius: 14px;
  /* Yuvarlatılmış köşeler */
  overflow: hidden;
  /* Taşan içeriği gizle (border-radius için) */
  background: rgba(0, 0, 0, .12);
  /* Koyu arka plan */
}

/* TABLO HÜCRE VE BAŞLIK */
.table th,
.table td {
  padding: 10px 12px;
  /* İç boşluk */
  border-bottom: 1px solid var(--border);
  /* Alt kenar çizgisi */
  font-size: 13px;
  /* Font boyutu */
}

/* TABLO BAŞLIĞI */
.table th {
  text-align: left;
  /* Sola yasla */
  color: var(--muted);
  /* Soluk renk */
  font-weight: 800;
  /* Kalın font */
}

/* SON SATIRIN ALT KENARİ YOK */
.table tr:last-child td {
  border-bottom: none;
  /* Alt çizgi kaldır */
}

/* KEY-VALUE ÇİFTLERİ CONTAINER */
.kvs {
  display: grid;
  /* Grid layout */
  gap: 10px;
  /* Öğeler arası boşluk */
}

/* TEK KEY-VALUE SATIRI */
.kv {
  display: flex;
  /* Flexbox */
  justify-content: space-between;
  /* İki yana yasla */
  gap: 12px;
  /* Aralarında boşluk */
  padding: 10px 12px;
  /* İç boşluk */
  border-radius: 12px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .14);
  /* Koyu arka plan */
}

/* KEY-VALUE BAŞLIĞI */
.kv span {
  color: var(--muted);
  /* Soluk renk */
  font-size: 12px;
  /* Küçük font */
}

/* KEY-VALUE DEĞERİ */
.kv b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Monospace font (rakamlar için) */
}

/* ÖN FORMATLAMA (PREFORMATTED) METİN */
.pre {
  margin: 0;
  /* Margin'leri sıfırla */
  padding: 12px;
  /* İç boşluk */
  border-radius: 14px;
  /* Yuvarlatılmış köşeler */
  border: 1px solid var(--border);
  /* Kenar çizgisi */
  background: rgba(0, 0, 0, .14);
  /* Koyu arka plan */
  overflow: auto;
  /* Taşan içerik için kaydırma çubuğu */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Monospace font */
  font-size: 12px;
  /* Küçük font */
  color: var(--text);
  /* Açık metin */
}

/* İPUCU METNİ */
.hint {
  margin: 10px 0 0 0;
  /* Sadece üst margin */
  color: var(--muted);
  /* Soluk renk */
  font-size: 12px;
  /* Küçük font */
  line-height: 1.45;
  /* Satır yüksekliği */
}

/* ALT BİLGİ (FOOTER) */
.foot {
  color: var(--muted);
  /* Soluk renk */
  font-size: 12px;
  /* Küçük font */
  text-align: center;
  /* Ortala */
}

/* MOBİL UYUMLULUK (KÜÇÜK EKRANLAR) */
@media (max-width: 980px) {
  .game {
    /* Oyun paneli */
    grid-template-columns: 1fr;
    /* Tek sütun (alt alta) */
  }

  .left {
    /* Sol bölüm */
    border-right: none;
    /* Sağ kenar yok */
    border-bottom: 1px solid var(--border);
    /* Alt kenar ekle */
  }
}