/* =========================================================
   tema.css — ortak görsel kimlik

   Bu dosya SADECE değişkenleri ve birkaç yeniden kullanılabilir
   parçayı içerir: renkler, yazı tipi, kart, buton.

   Oyun mantığı BURADA YOK. Her oyun kendi dosyasında kendi
   kodunu yazar ve bu dosyayı yalnızca görsel tutarlılık için
   kullanır. Bir oyunun hatası diğerlerini etkileyemez — geçen
   projede tam olarak bu eksiklik yüzünden tek bir ortak dosyadaki
   hata beş oyunu birden kırmıştı.
   ========================================================= */

:root {
  /* ---------- renkler: ofis ---------- */
  --zemin:        #0b0d12;   /* karanlık oda */
  --panel:        #12151d;   /* masa yüzeyi */
  --panel-2:      #1a1e29;   /* kart */
  --cizgi:        #262b38;   /* ince çizgi */
  --cizgi-2:      #333a4a;   /* belirgin çizgi */
  --metin:        #e8ecf4;
  --soluk:        #8b93a8;
  --soluk-2:      #5d6579;

  --vurgu:        #ffd84d;   /* yapışkan not sarısı */
  --vurgu-koyu:   #b39a2e;
  --basari:       #4ade80;
  --hata:         #ff4d4d;
  --uyari:        #ff9f45;
  --bilgi:        #4dd8ff;
  --mor:          #a78bfa;

  /* ---------- yazı tipi ---------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          "Cascadia Mono", Consolas, monospace;

  /* ---------- ölçü ---------- */
  --r:       14px;
  --r-sm:    9px;
  --r-lg:    20px;
  --golge:   0 10px 34px rgba(0, 0, 0, .45);
  --golge-sm: 0 3px 12px rgba(0, 0, 0, .3);

  --guvenli-u: env(safe-area-inset-top, 0px);
  --guvenli-a: env(safe-area-inset-bottom, 0px);
  --guvenli-l: env(safe-area-inset-left, 0px);
  --guvenli-r: env(safe-area-inset-right, 0px);
}

/* =========================================================
   TEMEL
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--zemin);
  /* iOS'ta çift dokunuşla yakınlaştırmayı kapat: oyun alanında
     yanlışlıkla sayfa büyümesin */
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--bilgi); }

h1, h2, h3 {
  margin: 0 0 .4em;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
}

/* =========================================================
   DOKU — karbon kâğıt hissi.
   Çok hafif; görünür ama metni bozmaz.
   ========================================================= */

.doku {
  background-image:
    radial-gradient(circle at 1px 1px,
      rgba(255, 255, 255, .022) 1px, transparent 0);
  background-size: 4px 4px;
}

/* =========================================================
   YAPISAL PARÇALAR
   ========================================================= */

.sarmal {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.ust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 0 22px;
}

.ust-bar h1 {
  font-size: 1.5rem;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ust-bar .alt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soluk-2);
  font-weight: 400;
}

/* ---------- buton ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--cizgi-2);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--metin);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  /* Tarayıcının kendi dokunma gecikmesi ve seçim kutusu kapatılır.
     -webkit-tap-highlight-color özellikle iOS'ta tıklama
     sonrası gri flaşı engeller. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease,
              transform .08s ease;
}

.btn:hover  { background: #212636; border-color: #41495c; }
.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 2px solid var(--bilgi);
  outline-offset: 2px;
}

.btn.ana {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #1a1500;
  font-weight: 700;
}
.btn.ana:hover { background: #ffe477; border-color: #ffe477; }

.btn.sessiz {
  background: transparent;
  border-color: var(--cizgi);
  color: var(--soluk);
}
.btn.sessiz:hover { color: var(--metin); background: var(--panel-2); }

.btn.kucuk { min-height: 38px; padding: 0 14px; font-size: 13px; }

/* ---------- rozet ---------- */

.rozet {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

.rozet.ana     { color: var(--vurgu); }
.rozet.basari  { color: var(--basari); }
.rozet.bilgi   { color: var(--bilgi); }
.rozet.sessiz  { color: var(--soluk-2); }

/* ---------- kart ---------- */

.kart {
  position: relative;
  display: flex;
  flex-direction: column;
  /* NOT: burada `height: 100%` verilmez. Izgara öğesi zaten
     `align-items: stretch` ile satır yüksekliğine esner; `height:100%`
     ise satır yüksekliği içerikten çözüldüğü için döngüsel çözümlemede
     kartı içeriğine göre kısar ve satır içi eşitliği bozar. */
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--panel-2);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease,
              box-shadow .18s ease;
}

.kart:hover {
  border-color: rgba(255, 216, 77, .45);
  transform: translateY(-3px);
  box-shadow: var(--golge);
}

.kart:focus-visible {
  outline: 2px solid var(--bilgi);
  outline-offset: 3px;
}

/* Görsel sarmalayıcı: "Yeni" rozeti köşeye yerleşebilsin diye.
   Bu blok yalnızca oyunlar dizininde kullanılır. */
.kart .gorsel-sar {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--panel);
  border-bottom: 1px solid var(--cizgi);
}
.kart .gorsel-sar .gorsel {
  height: 100%;
  border-bottom: 0;
}

.kart .yeni {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 216, 77, .94);
  color: #1a1500;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* Gövde esner, alt şerit kartın dibine yapışır: aynı satırdaki
   kartların etiket satırları her zaman aynı hizada durur. */
.kart .govde {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
}

.kart h3 {
  margin: 0 0 5px;
  font-size: 1.02rem;
}

.kart p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--soluk);
}

.kart .etiket {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Uzun tür etiketleri karta taşımasın ve alt şerit hep tek
     satırda kalsın: ikinci etiket esner, kısalır, ok işareti
     sağda sabit kalır. */
  flex-wrap: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soluk-2);
}

/* Tür etiketleri: ilki vurgulu, kalanları sade. Başlıkta parantez
   içi tür yazısı kaldırıldığı için burada görünür oluyor. */
.kart .tur {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  white-space: nowrap;
  /* Uzun etiket ("Mayın taraması") dar kartta taşmasın. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kart .tur.ilk {
  color: var(--vurgu);
  background: rgba(255, 216, 77, .1);
  /* İlk etiket tür adıdır ve kısalmamalı; kısalması gereken
     ikinci etiket kontrol biçimidir. */
  flex: 0 1 auto;
}

.kart .ok {
  margin-left: auto;
  padding-left: 4px;
  color: var(--vurgu);
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.kart:hover .ok { transform: translateX(3px); }

/* ---------- ipucu kutusu ---------- */

.kutu {
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--panel);
  padding: 16px 18px;
}

.kutu h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soluk-2);
  margin: 0 0 10px;
}

/* ---------- alt bilgi ---------- */

.alt-bar {
  padding: 26px 0 calc(34px + var(--guvenli-a));
  border-top: 1px solid var(--cizgi);
  margin-top: 34px;
  font-size: 12.5px;
  color: var(--soluk-2);
  line-height: 1.7;
}

.alt-bar a { color: var(--soluk); }

/* =========================================================
   OYUN KABUĞU
   Sekiz oyunun ortak arayüzü. Amaç: oyunlar birbirinin kopyası
   gibi görünmesin; hepsi aynı kabuğu kullansın.

   KABUK:    üst çubuk, oyun alanı + yan kutu, perde, klavye ipucu
   OYUN:     tahta, kurallar, sayaçlar, ses

   Bu blok yalnız düzen ve görünüm tanımlar. Oyun mantığı BURADA
   YOK; her oyun kendi kurallarını kendi dosyasında yazmaya devam eder.
   ========================================================= */

/* ---------- üst çubuk ---------- */
/* Sıra her oyunda aynı: geri bağlantı · kimlik · araçlar.
   Araçlar sağdan sola: destek · ses · mola · geri al. */

.oyun-ust {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  min-height: 64px;
  border-bottom: 1px solid var(--cizgi);
}

.oyun-ust .geri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--metin);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--cizgi-2);
  background: var(--panel-2);
  transition: background .15s ease, border-color .15s ease;
}
.oyun-ust .geri:hover { background: #212636; border-color: #41495c; }

/* Kimlik alanı sıkışabilir; alt başlık o zaman önce kısalır.
   Başlık ve skor asla üst üste binmemeli. */
/* Kimlik alanı: başlık ASLA kısalmaz. Boşluk azaldığında önce
   alt başlık küçülür; en sonra alt başlık gizlenir. Başlık ile skor
   hiçbir genişlikte üst üste binmemeli. */
.oyun-ust .kimlik {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 22px;
  overflow: hidden;
}
.oyun-ust .kimlik h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}
.oyun-ust .kimlik .alt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soluk-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

/* Skor özeti: üst çubuğun sağında, oyun alanının dışında kalır.
   Sabit genişlik verilir; değer 0'dan 999'a değişince düğmeler
   sağa kaymasın. */
.oyun-ust .skor {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.oyun-ust .skor > div { text-align: right; min-width: 52px; }
.oyun-ust .skor span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soluk-2);
  white-space: nowrap;
}
.oyun-ust .skor b {
  display: block;
  font-family: var(--mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--metin);
  line-height: 1.2;
}
.oyun-ust .skor .vurgulu b { color: var(--vurgu); }

/* Araç kümesi: destek daima en sağda. `margin-left:auto` yalnız
   ilk kümeye verilir; iki küme arasında yalnız boşluk kalır. */
.oyun-ust .araclar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
  flex: 0 0 auto;
}

/* ---------- ikon düğmeleri ---------- */
/* 38 px kare. Metin düğmeleri 46 px; iki ölçü dışında üçüncü yok. */

.btn.ikon {
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  border-radius: var(--r-sm);
  flex: 0 0 auto;
}
.btn.ikon svg { width: 19px; height: 19px; flex: 0 0 auto; }
/* Ampul ikonu tema.css'te tanımlı: her oyunda aynı çizgi kalınlığı. */
.btn .ampul-ikon, .btn svg[data-ampul] {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.btn.ikon:disabled { opacity: .35; cursor: default; }

/* ---------- destek düğmesi ---------- */
/* Oyun merkezindeki rozetten gelen sarı tonu. Boyutu diğer
   araçlarla aynı; "yardım" olduğu kadar vurgulanmaz, yalnız
   dokunduğunda belirginleşir. */

.btn.destek {
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  border-color: var(--vurgu);
  color: var(--vurgu);
  background: rgba(255, 216, 77, .08);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.btn.destek:hover:not(:disabled) { background: rgba(255, 216, 77, .18); }
.btn.destek.devrede {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #1a1500;
}
.btn.destek svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn.destek .ampul-ikon { width: 16px; height: 16px; flex: 0 0 auto; }

/* Perde içindeki destek düğmesi diğer perdelerle aynı ölçüde. */
.perde .btn.destek { height: 46px; min-height: 46px; width: 100%; }

/* ---------- oyun alanı ---------- */
/* Sol: tahta veya sahne. Sağ: 260 px bilgi kutusu. Aynı oluk,
   aynı kutu stili, aynı kenar yarıçapı — yedi oyunda da. */

.oyun-duzeni {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}

.oyun-alani,
.yan-kutu {
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--golge-sm);
  min-width: 0;
}
.oyun-alani { padding: 14px; }

.yan-kutu { padding: 16px; }
.yan-kutu h2 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: -.01em;
}

/* Sayı kutuları: etiket üstte, değer altta, tek satırda ikili. */
.istatistik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.istatistik > div {
  padding: 10px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
}
.istatistik span,
.istatistik dt {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soluk-2);
}
.istatistik b,
.istatistik dd {
  margin: 0;
  color: var(--vurgu);
  font-family: var(--mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.yan-kutu .eylemler { display: grid; gap: 8px; }
.yan-kutu .eylemler .btn { width: 100%; }

/* ---------- perde ---------- */
/* Tek iskelet, tek ölçü: rozet · başlık · paragraf · eylemler · alt şerit.
   Düğme sırası her oyunda aynı: ana eylem, destek, sonra gezinme. */

.perde {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 20px;
  background: rgba(6, 8, 12, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}
.perde[hidden] { display: none; }
.perde [hidden] { display: none !important; }

.perde .ic {
  width: min(100%, 380px);
  padding: 24px;
  border: 1px solid var(--cizgi-2);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--golge);
}
.perde h2 { margin: 0 0 8px; font-size: 24px; }
.perde p {
  margin: 0 0 18px;
  color: var(--soluk);
  font-size: 14px;
  line-height: 1.6;
}
.perde .eylem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.perde .eylem .btn { min-width: 170px; }

/* Alt şerit: oyunlar bağlantısı ve isteğe bağlı ikinci bağlantı.
   Her oyunda perde içinde aynı yerde durur. */
.perde .alt-serit {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cizgi);
}
.perde .alt-serit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--cizgi-2);
  background: var(--panel-2);
  color: var(--metin);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.perde .alt-serit a:hover { background: #212636; border-color: #41495c; }

/* Perde rozeti: oyunın kendi alt başlığı. */
.perde .rozet { margin-bottom: 12px; }

/* ---------- klavye ipucu ---------- */
/* Yedi oyunda da `kbd` etiketleriyle ve aynı boyutta. Düz metin
   kullanılmaz; tuş adı klavye görünümünde görünmelidir. */

.kontroller {
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--cizgi);
  color: var(--soluk-2);
  font-size: 12px;
  line-height: 1.8;
}
.kontroller kbd {
  display: inline-block;
  min-width: 23px;
  margin-right: 4px;
  padding: 0 5px;
  border: 1px solid var(--cizgi-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--metin);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
}
.kontroller b { color: var(--soluk); }

/* ---------- destek şeridi ---------- */
/* Oyun alanının DIŞINDA, üst çubuğun hemen altında. Tahtayı ya da
   sahneyi örtmez; oyuncu Turgay'ın oynadığını yine de görür. */

.destek-serit {
  margin: 0;
  padding: 7px 20px;
  border-bottom: 1px solid var(--cizgi);
  background: rgba(255, 216, 77, .07);
  color: var(--vurgu);
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.destek-serit[hidden] { display: none; }

/* ---------- durum satırı ---------- */
/* Her oyunda TEK bir durum satırı vardır ve oyun alanının altında,
   klavye ipucundan önce durur. Oyuncu hangi metni okuyacağını bilmelidir. */
.durum-satir {
  min-height: 40px;
  margin: 12px 0 0;
  padding: 0 2px;
  color: var(--soluk);
  font-size: 13px;
}
.durum-satir[hidden] { display: none; }

/* Tam ekran oyunlarda (Onay Merdiveni, Yük Tırı) aynı satır, kanvasın
   altındaki ince şeritte durur. Yükseklik ve renk aynıdır. */
.ipucu-serit {
  min-height: 40px;
  margin: 0;
  padding: 7px 16px;
  text-align: center;
  color: var(--soluk);
  font-size: 13px;
}
.ipucu-serit.klavye-ipucu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  padding: 9px 16px calc(12px + var(--guvenli-a));
  border-top: 1px solid var(--cizgi);
  color: var(--soluk-2);
  font-size: 12px;
}

/* =========================================================
   ERİŞİLEBİLİRLİK
   Hareket azaltma tercihi olan kullanıcı için geçişleri
   kapatır. Oyun içi animasyonları oyunun kendisi kontrol eder;
   bu yalnızca arayüz geçişlerini etkiler.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .kart:hover { transform: none; }
}

/* =========================================================
   KÜÇÜK EKRAN
   ========================================================= */

/* ---------- satır kaydıran üst çubuk ---------- */
/* Kimlik · skor · araçlar tek satırda 1020 px'den geniş yer bulur.
   Daha dar ekranda skor ikinci satıra iner: geri bağlantı, kimlik ve
   araçlar birinci satırda kalır; destek yine en sağ uçta.
   Sıra bozulmaz, yalnız satır değişir. */

@media (max-width: 1020px) {
  .oyun-ust {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .oyun-ust .kimlik { flex: 1 1 auto; margin-right: 0; }
  .oyun-ust .skor {
    order: 10;
    flex: 1 0 100%;
    margin-left: 0;
    gap: 22px;
  }
  .oyun-ust .skor > div { text-align: left; min-width: 0; }
  .oyun-ust .araclar { margin-left: 20px; }
}

/* ---------- sığmayan oyunlarda tek satır korunur ----------
   Tam ekran oyunlarda (Onay Merdiveni, Yük Tırı) genişlik kıt
   olduğunda dikey alanı da korumak gerekir: skor ikinci satıra
   inerse tahta sıkışır. Bu sınıf 1020–760 px arasında tek satırı
   korur, alt başlığı gizler. 760 px altında oyun alanı tek kolona
   iner, üst çubuk normal akışına döner ve skor ikinci satıra iner;
   o noktada tahta zaten genişliğe göre küçülür. */

@media (min-width: 761px) and (max-width: 1020px) {
  .oyun-ust.sigda { flex-wrap: nowrap; }
  .oyun-ust.sigda .skor { order: 0; flex: 0 0 auto; gap: 16px; }
  .oyun-ust.sigda .skor > div { text-align: right; min-width: 46px; }
  .oyun-ust.sigda .skor b { font-size: 16px; }
  .oyun-ust.sigda .kimlik .alt { display: none; }
}

/* ---------- dar ekran: oyun düzeni tek kolona iner ---------- */

@media (max-width: 760px) {
  .oyun-ust {
    padding: 10px 14px;
    gap: 10px;
  }
  .oyun-ust .kimlik { margin-right: 0; }
  .oyun-ust .araclar { margin-left: auto; }
  .oyun-duzeni { grid-template-columns: minmax(0, 1fr); }
  .oyun-alani { padding: 10px; }
  .yan-kutu { padding: 14px; }
  .destek-serit { padding: 6px 14px; font-size: 10px; }
}

@media (max-width: 560px) {
  .sarmal { padding: 0 14px; }
  .ust-bar { padding: 14px 0 18px; }
  .ust-bar h1 { font-size: 1.2rem; }
  .ust-bar .alt { font-size: 9.5px; }
  .kart .govde { padding: 12px 13px 14px; }
  .oyun-ust .kimlik h1 { font-size: 17px; }
  .oyun-ust .kimlik .alt { display: none; }
  .oyun-ust .skor b { font-size: 16px; }
  .perde .ic { padding: 20px; }
  .perde h2 { font-size: 21px; }
}

/* Dokunmatik cihazlarda (pointer: coarse) araç ve destek düğmeleri
   en az 44 px dokunma hedefi olur; masaüstü fare görünümü etkilenmez. */
@media (pointer: coarse) {
  .btn.ikon { width: 44px; min-width: 44px; min-height: 44px; height: 44px; }
  .btn.destek { min-width: 44px; min-height: 44px; height: 44px; }
}