/*
 * penalty-league/mobile-v297.css — Penaltı Ligi mobil tamamlayıcı katman.
 *
 * MEVCUT MOBİL DÜZEN KORUNDU.
 *   `mobile-v219.css` bu oyunun mobil düzenini zaten ciddi biçimde
 *   çözmüş: sahne gerçek görünür yüksekliği kullanıyor, gösterge şeridi
 *   Home Indicator'ın üstünde duruyor, yatay kullanım için ayrı bir blok
 *   var. Hiçbiri değiştirilmedi.
 *
 *   Sahnenin piksel piksel ayarlanmış yerleşimine (kale, kaleci, top,
 *   nişan noktaları) DOKUNULMADI: oradaki her `top`/`left` değeri fizik
 *   ve animasyonla eşleşiyor.
 *
 *   Burada yalnız ölçülerek bulunan dört açık kapatılır.
 */

@media (max-width: 900px), (pointer: coarse) {

  /* ===================== 1) iOS otomatik yakınlaştırma =================== */

  /*
   * ÖLÇÜLDÜ: `#mpName` ve `#mpCode` 14 piksel.
   *
   * `mobile-v219.css` metin alanlarını 16 piksele çekiyor ama seçicisi
   * `.stage .overlay input`. Bu iki alan çok oyunculu panelde, sahnenin
   * DIŞINDA duruyor; kural onlara hiç ulaşmıyordu. Sonuç: iPhone'da oda
   * adı yazmak için dokunulduğunda sayfa kendiliğinden yakınlaşıyor ve
   * düzen bozuluyordu.
   */
  /*
   * SEÇİCİ, SAYFANIN KENDİ KURALIYLA AYNI ŞEKİLDE YAZILDI.
   *
   * `html body #mpName` denendi ve İŞE YARAMADI: sayfa içindeki
   * `#multiOverlay .multiGrid input{font-size:14px!important}` kuralı iki
   * kimlik taşıyor, dolayısıyla daha özgül. Aynı seçici burada tekrarlanır;
   * bu dosya belgenin EN SONUNDA yüklendiği için eşit özgüllükte sonuncu
   * kural kazanır. Yükseklik, dolgu ve görünüm sayfanın kendi değerlerinde
   * kalır; değişen tek şey yazı boyu.
   */
  #multiOverlay .multiGrid input,
  #startOverlay .roomAccessPanel input[type="password"],
  #multiOverlay input[type="password"] {
    font-size: 16px !important;
  }

  /* ===================== 2) Yatayda güvenli alan ========================= */

  /*
   * Telefon yatay tutulduğunda çentik/Dynamic Island EKRANIN YANINDA olur.
   * Mevcut yatay bloğu üst ve alt payı hesaba katıyor, yan payı katmıyordu:
   * skor tablosunun ve araç kutusunun kenarı çentiğin altında kalıyordu.
   */
  @media (orientation: landscape) {
    html body.pl-engine3d .app {
      padding-left: max(var(--wos-safe-left, 0px), 0px) !important;
      padding-right: max(var(--wos-safe-right, 0px), 0px) !important;
    }

    html body .stage .overlay .modal {
      margin-left: max(var(--wos-safe-left, 0px), 0px) !important;
      margin-right: max(var(--wos-safe-right, 0px), 0px) !important;
    }
  }

  /* ===================== 3) Dokunma hedefleri ============================ */

  /*
   * ÖLÇÜLDÜ: ses sürgüleri 110x12 ve 106x12 piksel. Parmakla tutulamıyor.
   * Sürgünün YOLU aynı kalır (görünüm değişmez); büyüyen yalnız
   * dokunulabilir yükseklik ve tutamak.
   */
  html body #crowdVolume,
  html body #goalVolume,
  html body .stage input[type="range"] {
    height: 40px !important;
    background: transparent !important;
    touch-action: none !important;   /* sürüklerken sayfa kaymasın */
  }

  html body #crowdVolume::-webkit-slider-thumb,
  html body #goalVolume::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
  }

  html body #crowdVolume::-moz-range-thumb,
  html body #goalVolume::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }

  /* ÖLÇÜLDÜ: 36x36. Sekiz pikselle 44'e tamamlanır; görsel çap değişmez. */
  html body #portalHomeButton {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /*
   * "Tek maç / Rövanşlı" seçimi 156x34 piksel ölçüldü.
   *
   * Düğmeleri BÜYÜTMEK burada yanlış olur: ikisi 38 piksellik bir hap
   * kabın içinde duruyor ve yükseklikleri o kaba göre ayarlanmış
   * (`#startOverlay #singleFormat button{height:27px!important}`). Kural
   * ezilirse hap kabı taşar ve kurulum penceresinin görünümü değişir.
   *
   * Bunun yerine görünmez bir dokunma halkası eklenir: hap aynı kalır,
   * basılabilir alan 44 piksele çıkar. İki düğme yan yana durduğu için
   * halkalar yalnız DÜŞEY yönde büyür; birbirinin dokunuşunu çalmaz.
   */
  html body #singleFormat button,
  html body #mpFormat button,
  html body #leagueTabs button {
    position: relative !important;
  }

  html body #singleFormat button::after,
  html body #mpFormat button::after,
  html body #leagueTabs button::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 44px;
    transform: translateY(-50%);
    content: "";
  }

  /* ===================== 4) Kurulum penceresinin dibi =================== */

  /*
   * Takım listesi ve "Oyunu Başlat" şeridi pencerenin en altında duruyor.
   * Pencere kendi içinde kaydığı için son satır Home Indicator'ın altında
   * kalabiliyordu.
   */
  html body #startOverlay .modal,
  html body #multiOverlay .modal,
  html body #endOverlay .modal {
    padding-bottom: calc(14px + max(var(--wos-safe-bottom, 0px), 0px)) !important;
  }

  html body #teamSelectGrid .teamPick {
    min-height: 56px !important;
  }
}

/* ========================================================================== */
/*  TABLET                                                                    */
/* ========================================================================== */

/*
 * Tablette sahne büyür ama kurulum penceresi telefon genişliğinde kalıyordu.
 * Pencere okunabilir bir genişliğe açılır; sahne ve fizik etkilenmez.
 */
@media (min-width: 700px) and (max-width: 1023px) and (pointer: coarse) {
  html body .stage .overlay .modal {
    max-width: 640px !important;
  }

  html body #teamSelectGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}