/*
 * harf-avi/mobile-v219.css — Harf Avı mobil düzeni.
 *
 * İKİ AYRI DURUM VAR, İKİSİ AYRI TASARLANDI:
 *
 *   1) KLAVYE KAPALI — rahat okunur oyun ekranı.
 *      V212 katmanı, klavye açık durum için tasarlanmış sıkıştırmayı klavye
 *      KAPALIYKEN de uyguluyordu: "Menü" ve "Pas geç" düğmeleri 28 piksel
 *      yüksekliğinde ve 9 piksel yazıyla kalıyordu. Telefonda hem okunmuyor
 *      hem de 44 piksellik dokunma hedefinin çok altında kalıyordu.
 *      Burada o iki düğme ve durum satırı normal boyuna döner.
 *
 *   2) KLAVYE AÇIK — oyuna odaklı klavye düzeni.
 *      Sırasıyla: durum satırı, TAHMİN TABLOSU (ortalanmış, gerekirse kendi
 *      içinde kayar), yazı alanı ve EN ALTTA süre şeridi (menü · süre ·
 *      pas geç). Şerit bilerek en altta: klavye açıkken göz de başparmak da
 *      ekranın alt yarısında oluyor, süreyi görmek için yukarı bakmak
 *      gerekmesin. Böylece sayfa hiç kaydırılmaz; her harfte ekran zıplamaz.
 *
 * Renk, arka plan, hücre renkleri, animasyon: DEĞİŞTİRİLMEDİ.
 */

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

  /* ===================================================================
     0) ÜST ÇUBUK — 608 pikselden ~100 piksele
     =================================================================== */

  /*
   * BULUNAN HATA: `brand-v213.css`, `.topbar .top-actions` öğesine
   * `flex: 1 1 520px` veriyor. Masaüstünde üst çubuk YATAY olduğu için bu
   * 520 piksel bir GENİŞLİK tabanıdır. Telefonda çubuk sütuna döndüğünde
   * aynı değer YÜKSEKLİK tabanı olur: içinde tek bir 40 piksellik dil
   * düğmesi varken kutu 520 piksele şişiyordu. Üst çubuğun tamamı 608
   * piksel yer kaplıyor, oyun kartı ekranın çok altında kalıyordu.
   *
   * Taban içeriğe bırakılır; kutu artık içindekiler kadar yer kaplar.
   */
  html body .topbar .top-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    justify-content: flex-end !important;
  }

  /*
   * Üst çubuk telefonda SÜTUNA dönüyordu (`@media(max-width:700px)` içindeki
   * `flex-direction:column`), marka bloğu da `width:100%` alıyordu. İkisi
   * birlikte, tek satıra rahat sığan iki öğeyi alt alta iki satıra
   * yayıyordu. Satır düzeni geri getirildi: solda logo + ad, sağda dil
   * düğmesi — tek satır.
   */
  html body .topbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
  }

  html body .topbar .brand,
  html body .topbar .brand.brand-v213 {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Ad uzunsa kesilir; satır kırılıp çubuğu uzatmaz. */
  html body .topbar .brand h1,
  html body .topbar .brand p {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Logo telefonda daha ölçülü; kimliği aynı kalır. */
  html body .topbar .logo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 18px !important;
  }

  html body .topbar .brand h1 {
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  /*
   * Dil düğmesindeki "Değiştir" etiketi 390 pikselin altında gizleniyordu;
   * modern iPhone tam 390 piksel olduğu için kullanıcıya yalnız "Türkçe"
   * görünüyor ve düğmenin ne işe yaradığı anlaşılmıyordu. Etiket her mobil
   * genişlikte görünür — düğme zaten çalışıyordu, artık ne yaptığı da yazıyor.
   */
  html body .word-language-switch .word-language-switch-action {
    display: inline !important;
    margin-left: 4px !important;
    font-size: 10.5px !important;
    opacity: .8 !important;
  }

  html body .word-language-switch {
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  /* ===================================================================
     1) KLAVYE KAPALI — okunabilir ve dokunulabilir
     =================================================================== */

  /* HUD üç sütun kalır ama nefes alır. */
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .hud,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .hud {
    grid-template-columns: minmax(84px, 1fr) minmax(96px, 1.1fr) minmax(84px, 1fr) !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    margin: 0 0 8px !important;
  }

  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .hud-left,
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .hud-right,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .hud-left,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .hud-right {
    height: auto !important;
    min-height: 44px !important;
  }

  /* Dokunma hedefi 44 pikselin altına inmez, yazı okunur boyuta döner. */
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active #backBtn,
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active #newWordBtn,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .hud .ghost {
    height: 44px !important;
    min-height: 44px !important;
    max-height: none !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    letter-spacing: 0 !important;
  }

  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .timer-wrap,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .timer-wrap {
    height: auto !important;
    min-height: 44px !important;
  }

  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active #timerText,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .timer {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .timer-bar,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .timer-bar {
    width: 88px !important;
    max-width: 88px !important;
    height: 4px !important;
    min-height: 4px !important;
    margin: 5px auto 0 !important;
  }

  /* Durum satırı: tek satıra sıkıştırıp kesmek yerine iki satıra kadar sarar. */
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .status,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .status {
    height: auto !important;
    min-height: 34px !important;
    max-height: none !important;
    margin: 0 0 8px !important;
    padding: 8px 11px !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /*
   * KLAVYE KAPALIYKEN DE OYUN KARTI TEK SÜTUNDUR.
   *
   * Gerçek iPhone'da çekilen görüntüde tahta ile yazı alanı arasında ~500
   * piksel boş alan vardı. Sebep: `harf-avi-v111.css` yazı şeridini
   * `position:fixed` ile ekranın altına çiviliyor, tahta ise kartın üstünde
   * kalıyordu. Arada kalan yer, hiçbir şeyin doldurmadığı bir boşluk oluyor
   * ve oyun "yarım kalmış" görünüyordu.
   *
   * Şerit akışa geri alınır ve kart, görünür yüksekliği dolduran bir sütuna
   * çevrilir: üstte süre, ortada tahta (dikeyde ortalanır), altta yazı alanı.
   */
  html body.ha-v111-playing #gameScreen.active .game-main,
  html body.ha-v111-playing #multiScreen.active .multi-game {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding-top: 8px !important;
  }

  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .game-main,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .multi-game {
    min-height: calc(var(--wos-visible-height, 100dvh) - 128px) !important;
  }

  /* Sıra her iki durumda da aynı: süre → durum → tahta → yazı alanı. */
  html body.ha-v111-playing #gameScreen.active .hud,
  html body.ha-v111-playing #multiScreen.active .hud { order: 1 !important; }

  html body.ha-v111-playing #gameScreen.active .status,
  html body.ha-v111-playing #multiScreen.active .status { order: 2 !important; }

  html body.ha-v111-playing #gameScreen.active .board-wrap,
  html body.ha-v111-playing #multiScreen.active .board-wrap { order: 3 !important; }

  html body.ha-v111-playing #gameScreen.active #singleNativeEntry,
  html body.ha-v111-playing #multiScreen.active #multiNativeEntry { order: 4 !important; }

  html body.ha-v111-playing #gameScreen.active .keyboard,
  html body.ha-v111-playing #multiScreen.active .keyboard { order: 5 !important; }

  html body.ha-v111-playing #gameScreen.active .kbd-hint,
  html body.ha-v111-playing #multiScreen.active .kbd-hint { order: 6 !important; }

  /*
   * Yazı şeridi HER durumda sütunun elemanıdır. Kimlik seçicisi bilerek
   * kullanıldı: eski katman da kimlikle yazıyor, aynı ağırlıkta olmalı.
   */
  html body.ha-v111-playing #gameScreen.active #singleNativeEntry,
  html body.ha-v111-playing #multiScreen.active #multiNativeEntry,
  html body.ha-v111-playing #gameScreen.active .mobile-native-entry,
  html body.ha-v111-playing #multiScreen.active .mobile-native-entry {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Klavye kapalıyken tahta kalan alanda dikeyde ortalanır: boşluk
     aşağıda toplanmaz, düzen dengeli görünür. */
  html body.ha-v111-playing:not(.wos-keyboard-open) #gameScreen.active .board-wrap,
  html body.ha-v111-playing:not(.wos-keyboard-open) #multiScreen.active .board-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  /* ===================================================================
     2) KLAVYE AÇIK — oyuna odaklı düzen
     =================================================================== */

  /*
   * Oyun kartı görünür alana sabitlenir. Ölçü `--wos-visible-height`ten gelir;
   * bu değeri ortak zemin (mobile-foundation-v219.js) yazar, yani gerçek
   * görünür alandır — 100vh değil.
   */
  /*
   * iOS SAFARİ'DE `position: fixed` KULLANILMIYOR.
   *
   * Kartı görünür alana çivilemek, gerçek iPhone'da güvenilir değil: klavye
   * açılırken Safari sayfayı kendi kaydırıyor ve sabit öğe DÜZEN görüntü
   * alanına göre konumlanıyor. İki ölçü ayrıştığı anda yazı alanı klavyenin
   * altında kalıyor, kartın ortasında ölü boşluk oluşuyor.
   *
   * Kart artık akışta kalır ve yalnız kompaktlaşır; girişi görünür alana
   * taşımayı Safari'nin kendi davranışına bırakırız, `scroll-margin` ile de
   * klavye ve aksesuar şeridi için pay bırakılır.
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .game-main,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .multi-game {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px max(var(--wos-safe-right), 12px) 12px max(var(--wos-safe-left), 12px) !important;
    overflow: visible !important;
  }

  /* Aksesuar şeridi için pay: giriş şeridin altında kalmasın. */
  html body #singleNativeInput,
  html body #multiNativeInput,
  html body .mobile-native-entry {
    scroll-margin-bottom: 96px !important;
    scroll-margin-top: 12px !important;
  }

  /*
   * SIRA: durum → tahta → yazı alanı → SÜRE ŞERİDİ (en altta).
   *
   * Süre şeridi eskiden en üstteydi. Klavye açıkken oyuncunun gözü ekranın
   * ALT yarısında (yazdığı yer ve klavye) olduğu için süreyi görmek için
   * yukarı bakması gerekiyordu. Şerit en alta indi: menü, süre ve "pas geç"
   * artık yazı alanının hemen altında, başparmağın ve gözün olduğu yerde.
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .hud,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud {
    flex: 0 0 auto !important;
    order: 5 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;
    margin: 4px 0 0 !important;
  }

  /*
   * Üç bölmenin üçü de görünür kalır. Eski sürümde şerit 34 piksele
   * sıkıştırılmıştı ve "Pas geç" düğmesi kırpılıyordu (ekran görüntüsünde
   * şeridin sağı boştu, düğme ekranın ortasında asılı kalmıştı).
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .hud-left,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud-left {
    justify-self: start !important;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .hud-right,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud-right {
    justify-self: end !important;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .timer-wrap,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .timer-wrap {
    justify-self: center !important;
    min-width: 0 !important;
  }

  /* Dokunma hedefi klavye açıkken de 44 pikselin altına inmez. */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active #backBtn,
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active #newWordBtn,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud .ghost {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active #timerText,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .timer {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  /* Şerit alta indiği için "5 harf · Orta" rozeti yer kaplamasın. */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .hud-left .pill,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud-left .pill {
    display: none !important;
  }

  /*
   * DURUM SATIRI İKİ SATIRA KADAR AÇILIR.
   *
   * Önceki sürüm tek satıra sıkıştırıp üç noktayla kesiyordu. Bu satır
   * dekoratif değil — kelimenin neden kabul edilmediğini söyleyen TEK yer:
   *   "Kelime yerleşik Türkçe kelime veritabanında oyun kuralına uygun
   *    bulunamadı."
   * Kesilince oyuncu hatayı öğrenemiyordu (ekran görüntüsündeki "…Kelim…").
   *
   * Artık iki satıra kadar sarar, üçüncü satırda kesilir. İki satır 34
   * piksel eder; tablonun payı aşağıdaki `max-height` hesabında zaten
   * kaydırmaya bırakıldığı için yazı alanı klavyenin altına inmez.
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .status,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .status {
    flex: 0 0 auto !important;
    order: 1 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /*
   * TAHMİN TABLOSU: kalan alanın tamamını alır ve GEREKİRSE kendi içinde
   * kayar. Sayfa kaymaz. Aktif satırı ortalama işini mobile-scene-v219.js
   * yapar; buradaki tek görev alanı ayırmak.
   */
  /*
   * Tahmin tablosu klavye açıkken ESNEMEZ. Akış düzeninde `flex:1` vermek
   * kartı uzatıp yazı alanını klavyenin altına itiyordu. Tablo, görünür
   * alanın yarısını aşmayan sabit bir pencereye oturur ve gerekirse kendi
   * içinde kayar; aktif satırı ortalamayı mobile-scene-v219.js yapar.
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .board-wrap,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .board-wrap {
    flex: 0 0 auto !important;
    order: 2 !important;
    display: flex !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    /*
     * Tahtanın payı: görünür alandan sütunun geri kalanı düşülür.
     * Ölçülen sabitler — durum 27, giriş 48, süre şeridi 62, kart dolgusu
     * 22, üç boşluk 24 = 183; güvenlik payıyla 206.
     */
    max-height: min(52vh, calc(var(--wos-visible-height, 100dvh) - 206px)) !important;
    padding: 4px 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    align-items: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ===================================================================
     KUTULAR: AYRI AYRI VE TAM ORTADA
     ===================================================================

     BULUNAN HATA
       Satırlar `grid-template-columns: repeat(N, var(--cell))` ile
       kuruluyor — yani sütun GENİŞLİĞİ `--cell` değişkeninden geliyor.
       Önceki sürüm ise `.cell` öğesinin `width`ini doğrudan eziyordu:

           --cell            : clamp(24px, 7vw, 30px)   (v183 katmanı)
           .cell { width: ... : clamp(34px, 12.2vw, 46px) }  (bu dosya)

       390 piksellik telefonda sütun 27, kutu 46 piksel oluyordu. Kutular
       kendi sütunlarından 19 piksel taşıp yan yana BİRLEŞİK görünüyor,
       aradaki 3 piksellik boşluk yutuluyordu.

       Dahası, tahtanın kutu genişliği hâlâ sütunlara göre hesaplanıyor
       (5 x 27 + boşluklar = 148 piksel). `margin: 0 auto` o 148 piksellik
       kutuyu ortalıyor, içerik ise sağa doğru taşıyor. Kullanıcının
       gönderdiği ekran görüntüsünde tahtanın sola yaslı durmasının sebebi
       tam olarak bu: ORTALANAN kutu ile ÇİZİLEN içerik farklı genişlikte.

     ÇÖZÜM
       Kutu ölçüsü artık `--cell` üzerinden veriliyor. Sütun, kutu, tahta
       genişliği ve ortalama aynı sayıdan türediği için üçü de tutuyor.
       Boşluk 3'ten 7 piksele çıktı: kutular gözle ayrı ayrı okunuyor. */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .board,
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active #board,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .board,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active #multiBoard {
    --cell: clamp(34px, 11.6vw, 46px) !important;
    display: grid !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    gap: 7px !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .board .row,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .board .row {
    gap: 7px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .cell,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .cell {
    width: var(--cell) !important;
    height: var(--cell) !important;
    font-size: clamp(17px, 5.8vw, 24px) !important;
  }

  /*
   * Yazı alanı klavyenin hemen üstünde, her zaman görünür.
   *
   * `position` burada bilerek `static`e çekildi: eski katmanlar bu şeridi
   * sayfaya sabitliyordu (`fixed`). Sabit şerit, sütun düzeninde tahmin
   * tablosunun ÜSTÜNE biniyordu — testte 48 piksellik çakışma olarak
   * ölçüldü. Sütunun kendi elemanı olduğunda tablo ona yer ayırır.
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active #singleNativeEntry,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active #multiNativeEntry,
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .mobile-native-entry,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .mobile-native-entry {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    order: 3 !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 2px 0 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* iPhone Safari 16 pikselin altındaki yazıda otomatik yakınlaştırma yapar. */
  html body.ha-v111-playing.wos-keyboard-open #singleNativeInput,
  html body.ha-v111-playing.wos-keyboard-open #multiNativeInput {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  html body.ha-v111-playing.wos-keyboard-open .mobile-native-submit {
    min-width: 84px !important;
    min-height: 46px !important;
    font-size: 14px !important;
  }

  /*
   * Ekran klavyesi (harf renklerini gösteren tuş satırları) ve ipucu satırı
   * yalnız CİHAZ KLAVYESİ AÇIKKEN gizlenir. Aynı bilgi tahmin tablosundaki
   * renklerde zaten duruyor; klavye kapanınca tuş satırları geri gelir.
   * Görevdeki öncelik sırasında bu alan beşinci sırada.
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .keyboard,
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .kbd-hint,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .keyboard,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .kbd-hint {
    display: none !important;
  }

  /* Klavye açıkken yan panel ve dekoratif bloklar sahneyi daraltmasın. */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .side,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .room-panel,
  html body.ha-v111-playing.wos-keyboard-open .topbar {
    display: none !important;
  }

  /* ===================================================================
     3) Ortak: kurulum ekranı ve oda akışı
     =================================================================== */

  /* Oda kodu kopyalanabilir ve okunur kalır. */
  html body #roomInfoBox .room-code,
  html body .room-code {
    font-size: clamp(22px, 7vw, 30px) !important;
    letter-spacing: .12em !important;
    -webkit-user-select: all !important;
    user-select: all !important;
  }

  /* Kurulum düğmeleri başparmakla rahat basılır. */
  html body #menuScreen.active .primary,
  html body #menuScreen.active .secondary,
  html body #multiScreen.active .room-panel .primary,
  html body #multiScreen.active .room-panel .secondary {
    min-height: 48px !important;
  }

  /* Menü kartındaki mod düğmeleri tek sütunda, ferah. */
  html body #menuScreen.active .mode-btn {
    min-height: 96px !important;
  }

  /*
   * Durum satırı klavye KAPALIYKEN de sütunu şişirmez.
   *
   * Red mesajları kısaltıldı (bkz. index.html `dictionaryMessage`), ama
   * uzun bir metin yine de gelirse üç satırda durur. Üç satır 12.5px
   * yazıda ~50 piksel; sütunun payı bunu kaldırıyor.
   */
  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: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    max-height: 58px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/*
 * Çok kısa GÖRÜNÜR alan.
 *
 * Burada `@media (max-height:...)` KULLANILMAZ: medya sorgusu klavyenin
 * kapattığı alanı görmez. `wos-vh-short` / `wos-vh-xshort` sınıflarını ortak
 * zemin gerçek görünür yüksekliğe bakarak yazar.
 */
@media (max-width: 900px), (pointer: coarse) {
  /*
   * Kısa görünür alanda durum satırı GİZLENMEZ, tek satıra iner. Önceki
   * sürüm onu tamamen kaldırıyordu; oysa klavye açıkken iPhone'da görünür
   * alan zaten 480 pikselin altına düşüyor, yani hata mesajı tam da en çok
   * gerektiği anda kayboluyordu. Yalnız gerçekten yer kalmadığında
   * (`wos-vh-xshort`, 380 piksel altı) tamamen kaldırılır.
   */
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .status,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active .status {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    max-height: 38px !important;
    padding: 3px 9px !important;
    font-size: 11px !important;
  }
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active .status,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .status {
    display: none !important;
  }
  /*
   * Kısa alanda da ölçü `--cell` üzerinden verilir; `.cell` genişliğini
   * ayrıca ezmek sütunla kutuyu yeniden ayrıştırır (yukarıdaki hatanın
   * aynısı). Boşluk da orantılı olarak küçülür.
   */
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .board,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active #board,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active #multiBoard {
    --cell: clamp(30px, 9.8vw, 38px) !important;
    gap: 5px !important;
  }
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .board .row,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active .board .row {
    gap: 5px !important;
  }
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .cell,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active .cell {
    font-size: 17px !important;
  }
  /*
   * KISA ALANDA TAHTAYA DAHA ÇOK YER.
   *
   * 320x568 telefonda klavye açıkken geriye 268 piksel kalıyor. Süre şeridi
   * alta indikten sonra tahtaya yalnız 62 piksel — bir buçuk satır —
   * kalıyordu; oysa ekranın altında 63 piksel boş duruyordu. Sütunun
   * gerçekte kapladığı yere göre yeniden hesaplanır.
   */
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .board-wrap,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active .board-wrap {
    max-height: calc(var(--wos-visible-height, 100dvh) - 184px) !important;
  }

  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active .board-wrap,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .board-wrap {
    max-height: calc(var(--wos-visible-height, 100dvh) - 140px) !important;
  }

  /*
   * Bu ölçüde süre şeridi de sıkışır: zaman çubuğu kalkar, düğmeler ve
   * sayaç küçülür. Üçü de görünür kalır — kullanıcının istediği buydu.
   */
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active .hud,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud {
    min-height: 38px !important;
    gap: 8px !important;
    margin: 2px 0 0 !important;
  }

  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active .timer-bar,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .timer-bar {
    display: none !important;
  }

  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active #timerText,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .timer {
    font-size: 21px !important;
  }

  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active .hud .ghost,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .hud .ghost {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

/* =========================================================================
 * V229 — DAR TELEFONDA OYUN ADI KESİLMESİN
 * =========================================================================
 *
 * Üst çubuk V219'da tek satıra alınmıştı: solda logo + ad, sağda dil
 * düğmesi. O sırada başlık "H.A" idi ve iki karakter her genişliğe
 * sığıyordu. Başlık artık oyunun tam adı ("Harf Avı" / "Letter Hunt");
 * 320-360 piksellik ekranlarda dil düğmesinin yanına sığmıyor ve
 * "HA…" diye kesiliyordu — yani kısaltmanın çözdüğü sorun geri geliyordu.
 *
 * Bu genişliklerde çubuk iki satıra iner: 1. satır logo + ad, 2. satır
 * dil düğmesi. Ad tam yazılır, düğme aynı yerde ve aynı boyutta kalır.
 */
@media (max-width: 380px) {
  html body .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }

  html body .topbar .brand,
  html body .topbar .brand.brand-v213 {
    flex: 0 0 auto !important;
  }

  html body .topbar .brand h1 {
    font-size: 19px !important;
  }

  /* Satır düzeninden kalan `margin-left:auto` düğmeyi sağa itiyordu. */
  html body .topbar .top-actions {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
}

/* =========================================================================
 * V230 — ALTI SATIRIN ALTISI DA KLAVYE AÇIKKEN EKRANA SIĞAR
 * =========================================================================
 *
 * ÖLÇÜLEN DURUM (390x844, klavye açık, görünür alan 508 piksel):
 *     tahtaya ayrılan pencere   302 piksel
 *     tahtanın gerçek boyu      314 piksel
 *
 * Yani tahta penceresinden 12 piksel taşıyor ve altıncı satır yarısından
 * kesiliyordu. Sebep: kutu ölçüsü YALNIZ genişlikten türetiliyordu
 * (`--cell: clamp(34px, 11.6vw, 46px)` -> 390 piksellik telefonda 45).
 * Altı kutu 45'er piksel + beş boşluk 7'şer piksel = 305; pencereye
 * sığmıyor. Tahta kendi içinde kaydırılabildiği için hata "eksik" değil
 * "gizli" görünüyordu — kullanıcının kaydırması gerekiyordu.
 *
 * ÇÖZÜM
 *   Kutu ölçüsü artık iki sınırın KÜÇÜĞÜ:
 *     · genişlik sınırı — eskisi gibi (telefonun eni)
 *     · yükseklik sınırı — altı satır + beş boşluk pencereye sığacak ölçü
 *
 *   Pencere yüksekliği tek bir değişkenden (`--ha-tahta-alani`) okunuyor;
 *   böylece pencere ile kutu hesabı bir daha ayrışamaz. Ölçülen sonuç:
 *   kutu 45 -> 42, tahta 314 -> 296 piksel, altı satır tam görünür.
 *
 * Tahmin mantığı, renkler, kelime doğrulama: DEĞİŞTİRİLMEDİ.
 */
@media (max-width: 900px), (pointer: coarse) {

  /* Tahtaya kalan yükseklik ve satır boşluğu — TEK KAYNAK. */
  html body.ha-v111-playing.wos-keyboard-open {
    --ha-tahta-alani: min(52vh, calc(var(--wos-visible-height, 100dvh) - 206px));
    --ha-tahta-bosluk: 7px;
  }

  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open {
    --ha-tahta-alani: calc(var(--wos-visible-height, 100dvh) - 184px);
    --ha-tahta-bosluk: 5px;
  }

  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open {
    --ha-tahta-alani: calc(var(--wos-visible-height, 100dvh) - 140px);
    --ha-tahta-bosluk: 4px;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .board-wrap,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .board-wrap {
    max-height: var(--ha-tahta-alani) !important;
  }

  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .board-wrap,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active .board-wrap {
    max-height: var(--ha-tahta-alani) !important;
  }

  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #gameScreen.active .board-wrap,
  html body.wos-vh-xshort.ha-v111-playing.wos-keyboard-open #multiScreen.active .board-wrap {
    max-height: var(--ha-tahta-alani) !important;
  }

  /*
   * Yükseklik sınırı: (pencere - beş boşluk - kabın dolgusu) / altı satır.
   * 28 pikselin altına inilmez; o eşiğin altında tahta yine kendi içinde
   * kayar (dokunma hedefi okunmaz hâle gelmesin).
   */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .board,
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active #board,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .board,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active #multiBoard {
    --cell: min(
      clamp(34px, 11.6vw, 46px),
      max(28px, calc((var(--ha-tahta-alani) - var(--ha-tahta-bosluk) * 5 - 14px) / 6))
    ) !important;
    gap: var(--ha-tahta-bosluk) !important;
  }

  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .board,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active #board,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active #multiBoard {
    --cell: min(
      clamp(30px, 9.8vw, 38px),
      max(24px, calc((var(--ha-tahta-alani) - var(--ha-tahta-bosluk) * 5 - 12px) / 6))
    ) !important;
    gap: var(--ha-tahta-bosluk) !important;
  }

  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .board .row,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .board .row,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #gameScreen.active .board .row,
  html body.wos-vh-short.ha-v111-playing.wos-keyboard-open #multiScreen.active .board .row {
    gap: var(--ha-tahta-bosluk) !important;
  }

  /* Yazı ölçüsü kutuya oranlı kalır: küçülen kutuda harf taşmasın. */
  html body.ha-v111-playing.wos-keyboard-open #gameScreen.active .cell,
  html body.ha-v111-playing.wos-keyboard-open #multiScreen.active .cell {
    font-size: calc(var(--cell) * 0.52) !important;
  }
}

/* =========================================================================
 * V230 — ÜST ÇUBUKTA YALNIZ LOGO VE OYUNUN ADI, ORTALANMIŞ
 * =========================================================================
 *
 * Dil düğmesi (`.top-actions`) `mobile-v219.js` tarafından bir alt satıra,
 * "Ana Menü"nün sağına taşınıyor. Geriye kalan çubuk yalnız markayı taşır;
 * ad artık çubuğun tamamını kullanabildiği için hem Türkçe hem İngilizce
 * tam yazılıyor ve ortalanıyor. Böylece V229'da 380 pikselin altı için
 * eklenen "iki satıra in" istisnasına da gerek kalmadı.
 */
@media (max-width: 900px), (pointer: coarse) {

  html body .topbar {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 12px !important;
  }

  /*
   * `topbar-v230.css` markayı MASAÜSTÜ için mutlak konumla ortalıyor
   * (iki yanın genişliği eşit olmadığı için akışta ortalamak adı
   * kaydırıyordu). Mobilde şeritte markadan başka bir şey olmadığı için
   * mutlak konuma gerek yok; kaldırılmazsa marka akıştan kopuyor ve
   * şerit sıfır yükseklikte kalıyor.
   */
  html body .topbar .brand,
  html body .topbar .brand.brand-v213 {
    position: static !important;
    transform: none !important;
    flex: 0 1 auto !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Ad ortalanınca kesilmesine gerek kalmadı: iki dilde de tam yazar. */
  html body .topbar .brand h1 {
    overflow: visible !important;
    font-size: 22px !important;
    text-overflow: clip !important;
  }

  /* --- "Ana Menü" + dil düğmesi tek satır --- */

  html body .v65-inline-home {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 8px 0 10px !important;
  }

  html body .v65-inline-home .v65-home-btn {
    flex: 0 0 auto !important;
    min-height: 42px !important;
  }

  html body .v65-inline-home .top-actions {
    flex: 0 1 auto !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }

  /* Dil düğmesi "Ana Menü" ile aynı yükseklikte dursun. */
  html body .v65-inline-home .word-language-switch {
    min-height: 42px !important;
    height: 42px !important;
  }

  /*
   * V229'daki dar-ekran istisnası geri alınır: çubuk artık her genişlikte
   * tek satır, çünkü içinde yalnız marka var.
   */
  @media (max-width: 380px) {
    html body .topbar {
      flex-direction: row !important;
      align-items: center !important;
    }
    html body .topbar .brand h1 {
      font-size: 19px !important;
    }
    html body .topbar .top-actions {
      width: auto !important;
    }
  }
}