/*
 * son-harf/mobile-v297.css — Son Harf mobil tamamlayıcı katman.
 *
 * DİKEY DÜZEN KORUNDU.
 *   Bu oyunun dikey mobil düzeni ÖLÇÜLDÜ ve doğru çalışıyor: klavye açıkken
 *   390x844, 360x640 ve 320x568'de yazı alanı da "Gönder" düğmesi de
 *   görünür kalıyor. V165–V219 katmanlarına dokunulmadı.
 *
 *   Buradaki kuralların TAMAMI yatay kullanım ve tablet içindir.
 */

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

/*
 * ÖLÇÜLDÜ (844x390, telefon yatay, tur sürüyor):
 *     sayfa yüksekliği 1888 piksel (görünür alan 390)
 *     "Gönder" düğmesi ekranın DIŞINDA
 *
 * Birinci sebep: mobil katman `@media (max-width:820px)` ile sınırlıydı ve
 * yatayda genişlik 844 pikseli bulduğu için hiç çalışmıyordu. O sınır
 * genişletildi (ilgili dosyaların başındaki V297 notuna bakınız).
 *
 * İkinci sebep: mobil düzen TEK SÜTUN. Dar ekranda doğru olan bu düzen,
 * 844 piksel genişliğinde 625 piksellik bir kart üretiyor — ekranın 390
 * pikseline sığmıyor.
 *
 * Bu blok yeni bir tasarım getirmez: AYNI parçaları, ekranın gerçekten
 * geniş olduğu tek durumda iki sütuna dağıtır. Sol sütun oynanış (son harf,
 * kelime, yazı alanı, geri bildirim), sağ sütun bilgi (skor, kurallar,
 * akış). Renk, tipografi ve bileşenlerin kendi görünümü değişmez.
 */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  html body.sh-v111-playing .sh-game-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    align-content: start !important;
    padding: 10px 12px !important;
  }

  /* Sol sütun: oynanış. */
  html body.sh-v111-playing .sh-game-card > .sh-card-head,
  html body.sh-v111-playing .sh-game-card > .sh-word-row,
  html body.sh-v111-playing .sh-game-card > .sh-input-label,
  html body.sh-v111-playing .sh-game-card > #wordForm,
  html body.sh-v111-playing .sh-game-card > #feedback {
    grid-column: 1 !important;
  }

  /* Sağ sütun: bilgi. */
  html body.sh-v111-playing .sh-game-card > #scoreLine,
  html body.sh-v111-playing .sh-game-card > .rules,
  html body.sh-v111-playing .sh-game-card > #eventFeed,
  html body.sh-v111-playing .sh-game-card > #finalBoard {
    grid-column: 2 !important;
  }

  /* Kelime kutusu yatayda daha alçak; harf boyutu okunur kalır. */
  html body.sh-v111-playing .sh-word-row {
    min-height: 0 !important;
    padding-block: 6px !important;
  }

  /* Akış listesi kendi içinde kayar; sayfayı uzatmaz. */
  html body.sh-v111-playing #eventFeed {
    max-height: calc(var(--wos-visible-height, 100dvh) - 210px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  html body.sh-v111-playing .rules {
    max-height: 74px !important;
    overflow-y: auto !important;
  }

  /*
   * YAPIŞKAN ÜST ŞERİT YATAYDA KARTIN ÜSTÜNE BİNİYORDU.
   *
   * `mobile-app-v154.css` üst şeridi ve sekme satırını mobilde
   * `position:sticky` yapıyor. Dikeyde bu doğru: 844 piksellik ekranda
   * şerit 58 piksel yer kaplar ve kart altında rahatça akar.
   *
   * Yatayda görünür yükseklik 390 piksele iner ve klavye açıldığında
   * 190'ın altına düşer. Orada yapışkan şerit oyun alanının neredeyse
   * üçte birini kalıcı olarak yer; ölçülen kare, şeridin "mevcut kelime"
   * ve "son harf" kutusunu ÖRTTÜĞÜNÜ gösterdi.
   *
   * Yatayda şerit akışa döner: yukarı kaydırınca yerini oyuna bırakır,
   * aşağı kaydırınca geri gelir. Dikey düzen hiç etkilenmez.
   */
  html body.sh-v111-playing:not(.wos-keyboard-open):not(.wos-mobile-keyboard-open) .sh-nav,
  html body.sh-v111-playing:not(.wos-keyboard-open):not(.wos-mobile-keyboard-open) .sh-tabs,
  html body.sh-v111-playing .topbar-v230 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  /*
   * SEÇİCİ NEDEN BU KADAR UZUN
   *   `mobile-final-v183.css` şeridi
   *   `body.sh-v111-playing:not(.wos-keyboard-open):not(.wos-mobile-keyboard-open) .sh-nav`
   *   ile sabitliyor — dört sınıf taşıdığı için `html body.sh-v111-playing
   *   .sh-nav` (iki sınıf) onu yenemiyordu; ilk denemede şerit `fixed`
   *   kalmaya devam etti ve kartı örtmeyi sürdürdü. Aynı yapı burada
   *   tekrarlanır, dosya en sonda yüklendiği için eşitlikte bu kural
   *   kazanır.
   *
   *   O kural zaten yalnız klavye KAPALIYKEN çalışıyor; klavye açıkken
   *   şerit sabitlenmiyor. Yani bu blok yalnız turlar arasındaki duruma
   *   dokunur, yazarken hiçbir şeyi değiştirmez.
   */

  /* Kart üstündeki başlık şeridi yatayda yer kaplamasın. */
  html body.sh-v111-playing .sh-main-column {
    padding-block: 6px !important;
  }
}

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

/*
 * `device-auto-v275.js` tableti 960 pikselin altında mobil görünüme
 * yönlendiriyor; o karar korundu. Tablette telefon sütunu 1030 piksele
 * kadar uzuyordu: içerik okunabilir bir genişlikte ortalanır, kart
 * gereksiz büyümez.
 */
@media (min-width: 700px) and (max-width: 959px) and (pointer: coarse) and (orientation: portrait) {
  html body .sh-main-column,
  html body .sh-game-card {
    margin-inline: auto;
    max-width: 660px;
  }

  /*
   * AKIŞ LİSTESİ TABLETTE KALAN YERİ DOLDURUR.
   *
   * Ölçüldü (820x1180): kart 1030 piksel, içerik 842'de bitiyor —
   * ekranda 192 piksellik boş bir bant kalıyordu. Sebep, listenin
   * `mobile-final-v165.css` içinde 232 piksele sabitlenmesi: kap
   * `flex-direction:column` ve listede `flex-grow:1` var, ama tavan
   * yüzünden büyüyemiyor.
   *
   * Tablette tavan kaldırılır; liste kalan yeri alır ve daha çok kelime
   * görünür. Telefon ve masaüstü bu bloğun dışında, ölçüleri değişmez.
   */
  html body.sh-v111-playing #eventFeed,
  html body #eventFeed {
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
}

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

html.wos-standalone body.wos-mobile .topbar-v230,
html.wos-standalone body.wos-mobile .sh-topbar {
  padding-top: max(var(--wos-safe-top, 0px), 4px);
}

/* ========================================================================== */
/*  4. KLAVYE AÇIKKEN: SON İKİ HAMLE ŞERİDİ                                   */
/* ========================================================================== */

/*
 * İSTENEN
 *   Bilgisayarda oynanan kelimeler sağdaki akışta görünüyor: kimin yazdığı,
 *   ne yazdığı, kaç puan aldığı. Telefonda klavye açılınca bu bilgi ekranda
 *   hiç yoktu; oyuncu kendi kelimesinin kaç puan getirdiğini göremiyordu.
 *
 * YAPILAN
 *   Aynı akış listesi (`#eventFeed`) klavye açıkken SON İKİ hamleye inen,
 *   kaymayan bir şeride dönüşür ve yazı alanının hemen üstünde durur.
 *   Yeni bir liste, yeni bir veri kaynağı ya da ikinci bir kopya YOKTUR —
 *   oyunun kendi `renderEvents()` çıktısı kullanılır, dolayısıyla içerik
 *   her zaman canlıdır ve puanlama mantığına dokunulmamıştır.
 *
 * NEDEN TEK SATIR
 *   Akış satırı normalde iki satırdır: üstte "Oyuncu • kelime", altta
 *   "K → M · 5 harf" ayrıntısı. Klavye açıkken iki hamle × iki satır ~80
 *   piksel eder ve şerit kayar hâle gelir; en yeni hamleyi görmek için
 *   parmakla kaydırmak gerekirdi. Ayrıntı satırı gizlenince bir hamle tek
 *   satıra iner, iki hamle ~52 piksele sığar ve hiç kaymaz. İstenen üç
 *   bilgi — kim, ne, kaç puan — tek satırda zaten var.
 *
 * KLAVYE KAPALIYKEN HİÇBİR ŞEY DEĞİŞMEZ
 *   Liste eskisi gibi tam hâliyle, ayrıntı satırlarıyla ve kaydırmalı
 *   çalışır. Masaüstü bu bloğun dışında.
 */
@media (max-width: 900px), (pointer: coarse) {
  html body.wos-keyboard-open .sh-game-card #eventFeed {
    display: grid !important;
    grid-auto-rows: min-content !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Kaymaz: gösterilen şey zaten son iki hamle. */
    overflow: hidden !important;
  }

  /* Üçüncü ve sonrası şeritte yok — liste dolu, gösterilen son iki hamle. */
  html body.wos-keyboard-open .sh-game-card #eventFeed .event:nth-child(n + 3) {
    display: none !important;
  }

  html body.wos-keyboard-open .sh-game-card #eventFeed .event {
    align-items: center !important;
    padding: 5px 9px !important;
    min-height: 0 !important;
  }

  /*
   * Ayrıntı satırı ve onu doğuran satır sonu gizlenir; geriye "Oyuncu •
   * kelime" ile puan kalır. `br { display: none }` satır sonunu gerçekten
   * kaldırır — yalnız `span`ı gizlemek satırı boş bırakırdı.
   */
  html body.wos-keyboard-open .sh-game-card #eventFeed .event br,
  html body.wos-keyboard-open .sh-game-card #eventFeed .event span {
    display: none !important;
  }

  html body.wos-keyboard-open .sh-game-card #eventFeed .event strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }

  html body.wos-keyboard-open .sh-game-card #eventFeed .event b {
    flex: 0 0 auto !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
  }

  /*
   * KISA GÖRÜNÜR ALANDA ŞERİT KALKMAZ, TEK HAMLEYE İNER.
   *
   * V219 kısa ekranda günlüğü tamamen gizliyordu; o zamanki günlük iki
   * satırlı ve 78 pikseldi, yazı alanını aşağı itiyordu. Şerit artık bir
   * hamle başına ~26 piksel; tek hamle en dar telefonda bile yazı alanını
   * ezmiyor. Oyuncunun en çok merak ettiği şey — az önceki kelime kaç puan
   * getirdi — bu yüzden kısa ekranda da görünür.
   */
  html body.wos-vh-short.wos-keyboard-open .sh-game-card #eventFeed {
    display: grid !important;
    /* V219 kısa ekranda `flex:1 1 0` veriyordu; sütun germediği için şerit
       sıfır yükseklikte kalıyor, satır dışarı taşıyordu. Şerit artık
       içeriği kadar yer kaplar. */
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body.wos-vh-short.wos-keyboard-open .sh-game-card #eventFeed .event:nth-child(n + 2) {
    display: none !important;
  }

  /*
   * ÇOK KISA ALANDA DA TEK HAMLE KALIR.
   *
   * V219 burada şeridi tamamen kaldırıyordu. Ölçüm (375x667 iPhone SE,
   * klavye 336px → 331px görünür alan) şunu gösteriyor: yazı alanı 163'te
   * bitiyor, altında 141 piksel boş yer var. Yani iki satırlık eski günlük
   * için yer yoktu, tek satırlık şerit için var. Kaldırmak yerine bir
   * hamleye indirmek, en küçük telefonda bile "az önceki kelime kaç puan
   * getirdi" sorusunu cevaplıyor.
   */
  html body.wos-vh-xshort.wos-keyboard-open .sh-game-card #eventFeed {
    display: grid !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  html body.wos-vh-xshort.wos-keyboard-open .sh-game-card #eventFeed .event {
    padding: 4px 8px !important;
  }

  html body.wos-vh-xshort.wos-keyboard-open .sh-game-card #eventFeed .event strong {
    font-size: 11px !important;
  }

  /* Boş liste her koşulda yer kaplamaz. */
  html body.wos-keyboard-open .sh-game-card #eventFeed:empty {
    display: none !important;
  }
}