/*
 * penalty-league/mobile-v219.css — Penaltı Ligi mobil düzeni.
 *
 * ÖLÇÜLEN DURUM (390x844, gerçek tarayıcı):
 *   Üst çubuk 153 piksel, sahne yalnız 540 piksel kalıyordu. Sahne oyunun
 *   kendisi: kale, kaleci, top ve şut göstergeleri oradadır. Telefonda ekranın
 *   %18'ini skor tablosuna vermek sahneyi gereksiz daraltıyordu.
 *
 * BU DOSYANIN YAPMADIĞI ŞEYLER
 *   Üçlü şut kontrolü (yön / yükseklik / güç), fizik, kaleci yapay zekâsı,
 *   panenka, kamera oranı ve WebGL boyutlandırması: DEĞİŞTİRİLMEDİ.
 *   Buradaki her kural yalnız yerleşim ve güvenli alanla ilgilidir.
 */

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

  /* ===================== 1) Sahneye daha fazla yer ======================= */

  /*
   * Üst çubuk mobilde kompaktlaşır — bilgi SİLİNMEZ, yalnız satır yüksekliği
   * ve boşluklar telefona uyar. Kazanılan piksellerin tamamı sahneye gider.
   */
  html body.pl-engine3d .topbar {
    padding-top: calc(max(var(--wos-safe-top), 0px) + 6px) !important;
    padding-bottom: 6px !important;
    gap: 6px !important;
  }

  /*
   * Uygulama ızgarası gerçek görünür yüksekliği kullanır. 100vh, adres çubuğu
   * açılıp kapanırken yanlış ölçü verip sahnenin altını kesiyordu.
   */
  html body.pl-engine3d .app {
    height: var(--wos-visible-height, 100dvh) !important;
    max-height: var(--wos-visible-height, 100dvh) !important;
    padding-bottom: max(var(--wos-safe-bottom), 6px) !important;
  }

  /* Sahne kalan alanın tamamını alır; en kısa telefonda bile ezilmez. */
  html body.pl-engine3d #stage {
    min-height: min(58vh, 420px) !important;
  }

  /* ===================== 2) Kontroller sahneyi kapatmasın ================ */

  /*
   * Gösterge şeridi ekranın en altında, güvenli alanın ÜSTÜNDE durur.
   * Eskiden iPhone home göstergesi ve Android gezinme çubuğu şeridin
   * üstüne biniyordu.
   */
  html body.pl-engine3d .pl3dHud {
    padding-bottom: calc(max(var(--wos-safe-bottom), 0px) + 12px) !important;
  }

  /* Gösterge satırları dar ekranda okunur kalır. */
  html body.pl-engine3d .pl3dMeters {
    width: calc(100% - 16px) !important;
    padding: 8px 9px !important;
  }

  html body.pl-engine3d .pl3dMeterRow {
    grid-template-columns: 52px minmax(0, 1fr) 74px !important;
    gap: 7px !important;
  }

  html body.pl-engine3d .pl3dMeterLabel {
    font-size: 9px !important;
    letter-spacing: .4px !important;
  }

  /* Şut düğmesi başparmakla rahat basılır ve sahnenin kritik bölümünü
     (kale ağzı) kapatmaz: şeridin en altındadır. */
  html body.pl-engine3d .pl3dHud button {
    min-height: 48px !important;
  }

  /* Yönlendirme satırı iki satıra kadar sarar, kesilmez. */
  html body.pl-engine3d .pl3dPrompt {
    max-width: calc(100% - 20px) !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  /* ===================== 2a) Bilgi düğmesi kaldırıldı =================== */

  /*
   * Sahnenin sol üstündeki "ℹ" bilgi düğmesi kaldırıldı. Gösterdiği özet,
   * her hafta sonunda zaten maç sonuçları ve puan durumu ekranlarında
   * veriliyor; sahnede yer kaplaması ve tam ekran düğmesiyle çakışması
   * dışında bir katkısı yoktu.
   */
  html body #v58MobileInfoToggle,
  html body .v58-mobile-info-panel {
    display: none !important;
  }

  /* ===================== 2b) Tam ekran düğmesi ========================== */

  /*
   * Düğme sahnenin sol üstünde, ses kutusunun ÜSTÜNDE ve güvenli alanın
   * içinde durur; artık başka bir denetimle çakışmıyor.
   */
  html body.pl-engine3d .fieldTools .fullscreenBtn {
    order: -1 !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  /*
   * iOS'ta tam ekran API'si yok. O cihazlarda "sürükleyici mod" devreye
   * girer: sayfa kabuğu (skor tabelası dışındaki boşluklar) kısılır, sahne
   * görünür alanın tamamını alır. Oyun mantığı ve kamera oranı değişmez.
   */
  html body.pl-immersive-v219 .app {
    height: var(--wos-visible-height, 100dvh) !important;
    max-height: var(--wos-visible-height, 100dvh) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /*
   * Üst çubuk sürükleyici modda GERÇEKTEN kısalır. `transform: scale()`
   * kullanılmadı: ölçekleme yalnız çizimi küçültür, kapladığı yer aynı
   * kalır ve sahne hiç büyümezdi.
   */
  html body.pl-immersive-v219 .topbar {
    padding: max(var(--wos-safe-top), 2px) 8px 2px !important;
    gap: 2px !important;
    font-size: 11px !important;
  }

  html body.pl-immersive-v219 .topbar :is(h1, h2, .teamName, .scoreLine) {
    font-size: .82em !important;
    line-height: 1.1 !important;
  }

  /* Sürükleyici modda ses/araç kutusu da küçülür, sahneyi kapatmaz. */
  html body.pl-immersive-v219 .fieldTools .soundBox {
    display: none !important;
  }

  /*
   * Sahnenin `max-height` sınırı sürükleyici modda kalkar. Normal modda
   * sınır KORUNUR: kamera yatay çerçeveyi sabit tuttuğu için çok uzun bir
   * sahne yalnız gökyüzü ve çim ekler, kaleyi büyütmez. Tam ekranda ise
   * amaç zaten alanın tamamını kullanmak.
   */
  html body.pl-immersive-v219 #stage {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  html body.pl-immersive-v219 .fieldTools {
    top: calc(max(var(--wos-safe-top), 0px) + 44px) !important;
  }

  /* ===================== 3) Ses kutusu ve yardımcı araçlar =============== */

  /*
   * Araç kutusu sol üstte, güvenli alanın içinde. Sahnenin ortasına
   * taşmıyor, kaleyi kapatmıyor.
   */
  html body.pl-engine3d .fieldTools {
    top: calc(max(var(--wos-safe-top), 0px) + 54px) !important;
    left: calc(max(var(--wos-safe-left), 0px) + 8px) !important;
    width: 126px !important;
  }

  /* ===================== 4) Menü ve kurulum pencereleri ================== */

  /* Pencere sahneyi taşmaz, kendi içinde kayar; başlık ve düğmeler kesilmez. */
  html body .stage .overlay .modal {
    max-height: calc(var(--wos-visible-height, 100dvh) - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html body .stage .overlay .modal button {
    min-height: 46px !important;
  }

  /* Oda kodu ve şifre alanları: okunur, kopyalanabilir, doğru klavye. */
  html body #multiOverlay input,
  html body .stage .overlay input {
    min-height: 48px !important;
    font-size: 16px !important;   /* iOS otomatik yakınlaştırma eşiği */
  }

  html body #mpRoomInfo,
  html body .plRoomCode {
    -webkit-user-select: all !important;
    user-select: all !important;
  }

  /* ===================== 5) Yatay kullanım =============================== */

  /*
   * Yatayda ekran çok alçalır. Üst çubuk küçülür, sahne korunur: kale
   * kadrajdan çıkmaz, top ve kaleci kesilmez.
   */
  @media (orientation: landscape) and (max-height: 520px) {
    html body.pl-engine3d .topbar {
      padding-top: calc(max(var(--wos-safe-top), 0px) + 2px) !important;
      padding-bottom: 2px !important;
    }
    html body.pl-engine3d #stage {
      min-height: 0 !important;
    }
    html body.pl-engine3d .pl3dHud {
      padding: 6px 10px calc(max(var(--wos-safe-bottom), 0px) + 6px) !important;
      gap: 4px !important;
    }
    html body.pl-engine3d .pl3dPrompt {
      font-size: 10.5px !important;
    }
    /* Araç kutusu yatayda sahneyi kapatmasın. */
    html body.pl-engine3d .fieldTools {
      top: calc(max(var(--wos-safe-top), 0px) + 40px) !important;
      width: 108px !important;
    }
  }
}