/*
 * harf-avi/mobile-v297.css — Harf Avı mobil tamamlayıcı katman.
 *
 * MEVCUT MOBİL DÜZEN KORUNDU.
 *   Bu oyunun klavye davranışı ÖLÇÜLDÜ ve zaten doğru çalışıyor. 390x844,
 *   360x640 ve 320x568'de klavye açıkken:
 *       yazı alanı görünür, tahta görünür,
 *       "Ana menü", "Yeni kelime" ve "Gönder" düğmelerinin üçü de görünür.
 *   V209–V219 katmanlarının hiçbirine dokunulmadı.
 *
 *   Burada yalnız o katmanların kapsamadığı iki durum ele alınır: yatay
 *   kullanım ve tablet.
 */

/* ========================================================================== */
/*  1. YATAY KULLANIM — ÖLÇÜLEN BOZULMA                                       */
/* ========================================================================== */

/*
 * ÖLÇÜLDÜ (844x390, telefon yatay, tur sürüyor):
 *     sayfa yüksekliği 1714 piksel (görünür alan 390)
 *     .board-wrap      -359 → 56    (tahta ekranın YUKARISINDA)
 *     .keyboard         124 → 269   (ekran klavyesi GÖRÜNÜR)
 *     .mobile-native-entry 62 → 114 (yazı şeridi de GÖRÜNÜR)
 *
 * SEBEP: bu oyunun mobil katmanı `@media (max-width:820px)` ile sınırlı.
 * Telefon yatay tutulduğunda genişlik 844 piksele çıkıyor ve katman
 * TAMAMEN devre dışı kalıyor. Sayfa masaüstü düzenine düşüyor: ekran
 * klavyesi ile mobil yazı şeridi AYNI ANDA görünüyor, tahta kadraj dışına
 * çıkıyor.
 *
 * ÇÖZÜM: yeni bir yatay tasarım YAPILMAZ. Mobil katmanın belirleyici
 * kuralları, yatay tutulan DOKUNMATİK ekranda da geçerli kılınır — yani
 * oyuncu telefonu çevirdiğinde dikeydeki düzenin aynısını görür.
 * Masaüstü penceresi bu bloktan etkilenmez: `pointer: coarse` şartı var.
 */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  /* Ekran klavyesi mobilde kullanılmıyor; yazı sistem klavyesiyle girilir. */
  html body.ha-v111-playing .keyboard,
  html body.ha-v111-playing .kbd-hint {
    display: none !important;
  }

  html body.ha-v111-playing .mobile-native-entry {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 82px !important;
    gap: 5px !important;
  }

  html body.ha-v111-playing .game-layout { display: block !important; }

  html body.ha-v111-playing .game-main {
    padding: 8px !important;
    padding-bottom: 10px !important;
    gap: 6px !important;
  }

  /*
   * Tahta kalan alanda kendi içinde kayar. Sabitler ölçüldü:
   * süre şeridi 62, durum 27, yazı şeridi 52, dolgu ve boşluklar 24 = 165.
   */
  html body.ha-v111-playing .board-wrap {
    max-height: calc(var(--wos-visible-height, 100dvh) - 165px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Süre şeridi yatayda yapışkan kalmaz; alanın tamamı oyuna gitsin. */
  html body.ha-v111-playing .hud {
    position: relative !important;
    top: auto !important;
    padding: 5px 7px !important;
  }

  /*
   * ÜST ŞERİT DE YAPIŞKAN KALMAZ.
   *
   * `mobile-app-v154.css` şeridi mobilde `position:sticky` yapıyor.
   * Dikeyde doğru; yatayda görünür yükseklik 390 pikseldir ve klavye
   * açıldığında 190'ın altına iner — orada 58 piksellik kalıcı bir şerit
   * oyun alanının üçte birini yer ve tahtanın üstünü örter. Yatayda şerit
   * akışa döner. Dikey düzen etkilenmez.
   */
  html body.ha-v111-playing .topbar,
  html body.ha-v111-playing .topbar-v230 {
    position: relative !important;
    top: auto !important;
  }
}

/* ========================================================================== */
/*  2. TABLET                                                                 */
/* ========================================================================== */

/*
 * `device-auto-v275.js` tableti 960 pikselin altında mobil görünüme
 * yönlendiriyor; o karar korundu. Tablette telefon düzeni ekranın ortasında
 * dev bir sütuna dönüşüyordu: içerik okunabilir bir genişlikte ortalanır.
 */
@media (min-width: 700px) and (max-width: 959px) and (pointer: coarse) {
  body.wos-mobile .wrap,
  body.wos-mobile .screen,
  body.wos-mobile .game-main,
  body.wos-mobile .multi-game {
    margin-inline: auto;
    max-width: 680px;
  }
}

/* ========================================================================== */
/*  3. ANA EKRANDAN AÇILAN UYGULAMA                                           */
/* ========================================================================== */

/*
 * Tarayıcı çubuğu yokken sayfa gerçekten ekranın tepesinden başlar; üst
 * şerit durum çubuğunun altına inmeli. Pay sıfırsa (Android, masaüstü)
 * hiçbir şey değişmez.
 */
html.wos-standalone body.wos-mobile .topbar-v230,
html.wos-standalone body.wos-mobile .wrap > header {
  padding-top: max(var(--wos-safe-top, 0px), 4px);
}

/* ========================================================================== */
/*  4. DURUM SATIRI HER ZAMAN AYNI YÜKSEKLİKTE                                */
/* ========================================================================== */

/*
 * SORUN
 *   Üstteki durum satırı ("İlk harf verildi: S…", "Bu kelime sözlükte yok.
 *   Tekrar dene." gibi) mesajın uzunluğuna göre büyüyordu: kısa mesajda tek
 *   satır (34px), uzun mesajda iki–üç satır (51–58px). Yükseklik her mesajda
 *   değiştiği için tahta aşağı kayıyor, yazı alanı yer değiştiriyordu.
 *   Oyuncunun gördüğü: "bazen düzgün duruyor, bazen aşağı geliyor."
 *
 * ÇÖZÜM
 *   Şeridin yüksekliği SABİTLENİR. Mesaj kısa da olsa uzun da olsa şerit
 *   aynı yüksekliktedir, tahta hiç oynamaz. Sabit şeride sığmayan uzun
 *   mesajlar KESİLMEZ; `mobile-v297.js` yazı boyunu bir tabana kadar
 *   küçülterek içeri sığdırır. Böylece hem düzen sabit kalır hem de kelimenin
 *   neden kabul edilmediği okunabilir — v219'un üç noktayla kesme kararının
 *   düzeltmek istediği asıl sorun buydu.
 *
 * NEDEN `!important`
 *   Bu oyunun mobil katmanındaki her kural `!important` ile yazılmış
 *   (v140'tan v219'a on bir dosya). Aynı seçiciyi ağırlıksız yazmak hiçbir
 *   şey yapmazdı. Yeni bir yarış açmamak için seçici v219'daki ile birebir
 *   aynı tutuldu; kazanan yükleme sırasıdır.
 */
@media (max-width: 900px), (pointer: coarse) {
  /* Klavye kapalı: iki satır tam boyuyla sığar (11.5px × 1.3 ≈ 15px). */
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .status,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .status {
    /*
     * `display:flex` KULLANILMAZ.
     *   Mesaj tek bir metin akışı değil: "İlk harf verildi: <b>D</b>."
     *   Flex kapta metin ile <b> AYRI birer öğe olur, ortalama onları
     *   birbirinden ayırır ve yazı "İlk harf verildi:    D   . Kelimeyi…"
     *   diye dağılır. Blok akışı korunur; dikey ortalama `align-content`
     *   ile yapılır (blok kaplarda Chrome 123+/Safari 17.6+). Desteklemeyen
     *   eski tarayıcıda yazı üstte durur — şerit yine sabit, düzen yine
     *   oynamaz.
     */
    display: block !important;
    align-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 4px 11px !important;
    overflow: hidden !important;
    /* Sığdırma işini yazı boyu yapar; kırpma yapmaz. */
    text-overflow: clip !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
  }

  /* Klavye açık: alan dar, şerit daha ince — ama yine SABİT. */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .status,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .status {
    /*
     * `display:flex` KULLANILMAZ.
     *   Mesaj tek bir metin akışı değil: "İlk harf verildi: <b>D</b>."
     *   Flex kapta metin ile <b> AYRI birer öğe olur, ortalama onları
     *   birbirinden ayırır ve yazı "İlk harf verildi:    D   . Kelimeyi…"
     *   diye dağılır. Blok akışı korunur; dikey ortalama `align-content`
     *   ile yapılır (blok kaplarda Chrome 123+/Safari 17.6+). Desteklemeyen
     *   eski tarayıcıda yazı üstte durur — şerit yine sabit, düzen yine
     *   oynamaz.
     */
    display: block !important;
    align-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 3px 9px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
  }

}