/* Spor kitabı kendi çerçevesinde ve sayfanın TEK içeriği: kabuğun üst şeridinin
   altında kalan her şey onun. Yükseklik SABİT DEĞİL: kitap kendi içinde
   kaydırıyor, dış sayfa da kaydırırsa oyuncu iki kaydırma çubuğuyla uğraşır.
   `100dvh` (`vh` değil) — mobilde adres çubuğu toplanınca `vh` sayfayı
   taşırıyor ve alt şerit ekran dışında kalıyor. */
.sports-board {
  /* Kitabın kendi çubuğunu görüş alanının dışına iten pay — gerekçe aşağıda. */
  --kitap-cubuk: 17px;
  margin: 0;
  overflow: hidden;
  background: var(--panel);
}

/*
 * 🔴 KİTABIN ÇUBUĞU BOYANAMIYOR, KIRPILIYOR.
 *
 * Çerçeve ÇAPRAZ-KÖKEN (kitap `sport_base_url` altından servis ediliyor):
 * tarayıcı kuralı gereği bizim CSS'imiz o belgeye GİREMEZ, yani sağdaki gri
 * varsayılan çubuk `::-webkit-scrollbar` ile siyah-kırmızı yapılamaz. Yapılan
 * şey tek gerçek seçenek: çerçeveyi kapsayıcıdan `--kitap-cubuk` kadar geniş
 * verip çubuğu görüş alanının dışında bırakmak. Kapsayıcıda `overflow: hidden`
 * zaten var; tekerlek, dokunma ve klavye ile kaydırma AYNEN sürüyor.
 *
 * ⚠️ TEK RİSK: kitap belge yerine iç bir kutuda kaydırıyorsa kırpılan 17px
 * çubuk değil İÇERİK olur (kuponun sağ kenarı). Geri almak için `--kitap-cubuk`
 * değerini `0px` yapmak yeterli.
 *
 * Çerçevenin İÇİNİ gerçekten kırmızıya boyayan tek kol sağlayıcının kendi
 * teması: BO'daki `sport_color` ayarı (`?color=` olarak adrese yazılıyor).
 */
.sports-frame {
  display: block;
  width: calc(100% + var(--kitap-cubuk));
  /* Mobil pay: yapışkan başlık (42 + 8 + 1px çizgi) + kabuğun alt şerit için
     ayırdığı 112px. Sayfa başlığı kalktığı için başka çıkarılacak bir şey yok. */
  height: calc(100dvh - 163px);
  min-height: 420px;
  border: 0;
}

/*
 * 🔴 GİZLİYKEN GERÇEKTEN GİZLİ. Kitap artık kabukta yaşıyor
 * (`features/sports/SportBook`): `/sports` dışındaki her sayfada `<main>`in
 * çocuğu olarak DURUYOR, çünkü sökmek dönüşü ~13 sn'ye çıkarıyor. Tarayıcının
 * kendi `[hidden]` kuralı `display: none` veriyor ama bu dosyadaki bir
 * `display` bildirimi onu sessizce yener — o gün kitap casino sayfasının
 * ortasında belirirdi. Kural açıkça yazılı ki o kaza olmasın.
 */
.sports-board[hidden] {
  display: none;
}

.sports-board.is-loading,
.sports-board.is-closed,
.sports-board.is-error {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 24px;
  color: var(--white-a72);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 769px) {
  /*
   * ⚠️ SEÇİCİ BİLEREK UZUN. Panelin boşluğunu veren kural
   * `.app-shell.app-fluid > .content` (0,3,1); `.sports-content` tek başına
   * onu YENEMEZ ve kitap dört yanında hava ile otururdu. Sınıf dosya sırasına
   * değil özgüllüğe dayanıyor: `sports.css` sayfa başına yükleniyor ve sırası
   * garanti değil.
   */
  .app-shell.app-fluid > .content.sports-content {
    gap: 0;
    min-height: 0;
    padding: 0;
  }

  /* Kabuk ilk çocuğa (ve mobil başlıktan sonrakine) üstten hava veriyor —
     kitabın üstünde şeffaf bir şerit bırakırdı. */
  .app-shell.app-fluid > .content.sports-content > :first-child,
  .app-shell.app-fluid > .content.sports-content > .mobile-header + * {
    margin-top: 0;
  }

  /*
   * Yükseklik ÖLÇÜLMÜYOR, DEVRALINIYOR. Panel masaüstünde esnek bir sütun ve
   * kendi yüksekliği zaten `calc(100vh - 83px)`; alt bilgi de kalktığı için
   * kitap panelin TEK çocuğu. Burada 83'ü ikinci kez yazmak, üst şerit bir gün
   * değiştiğinde sessizce kayacak bir kopya olurdu.
   *
   * ⚠️ `min-height: 0` şart: `.content > *` daralmayı kapatıyor ve esnek
   * çocuğun kendiliğinden en küçük boyu içeriği kadardır.
   */
  .content.sports-content > .sports-board {
    flex: 1 1 auto;
    min-height: 0;
  }

  .sports-frame {
    height: 100%;
  }
}