/* Harf Avi V197 — kisa ekran (mobil klavye acik) kompakt modu
   ---------------------------------------------------------------------------
   SORUN: Mobil klavye acilinca gorunur ekran yuksekligi ~340-430px'e duser.
   Olculen degerler (duzeltme oncesi):
       375x380 -> 6 satirin yalnizca 4'u gorunuyor  (2 satir kesik)
       360x400 -> 4/6 gorunuyor
       390x430 -> 5/6 gorunuyor
       360x340 -> 3/6 gorunuyor
   Mevcut harf-avi-v111.css yalnizca .board-wrap'i "overflow:auto" yapiyor,
   yani eksik satirlar icin tahtanin ICINDE ayrica kaydirma gerekiyordu.
   Oyuncu yazarken 6/6 deneme hakkini ayni anda goremiyordu.

   COZUM: Ekran yuksekligi kisaldiginda hucre boyutunu kalan yukseklige gore
   olcekle, ust cubuk/durum satirini sikistir ve tahtayi kaydirmadan tam sigdir.
   Genis/uzun ekranlarda (normal dikey kullanim) hicbir sey degismez. */

@media (max-width: 820px) and (max-height: 620px) {

  /* --- ust cubuk (HUD) sikistir --- */
  body.ha-v111-playing .hud {
    padding: 3px 6px !important;
    margin: 0 -1px 3px !important;
    border-radius: 10px !important;
  }
  body.ha-v111-playing .hud .ghost,
  body.ha-v111-playing .hud .pill {
    min-height: 26px !important;
    padding: 3px 5px !important;
    font-size: 8px !important;
  }
  body.ha-v111-playing .timer { font-size: 17px !important; }
  body.ha-v111-playing .timer-bar { height: 4px !important; margin-top: 2px !important; }
  body.ha-v111-playing .timer-wrap { min-width: 74px !important; width: 74px !important; }

  /* --- durum yazisi tek satira insin --- */
  body.ha-v111-playing .status {
    min-height: 0 !important;
    margin: 0 0 3px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
    border-radius: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }

  /* --- tahta: kaydirma YOK, tamami sigsin --- */
  body.ha-v111-playing .board-wrap,
  body.wos-keyboard-open.ha-v111-playing .board-wrap {
    padding: 1px 0 2px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.ha-v111-playing .board,
  body.ha-v111-playing .row { gap: 3px !important; }

  /* Satir kapsayicisinin kendi sabit yuksekligi var (olculen: 48px). Hucreler
     kuculse bile satir 48px kaldigi icin tahta daralmiyordu; serbest birak. */
  body.ha-v111-playing .board .row,
  body.ha-v111-playing #board .row {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Hucre boyu = (gorunur yukseklik - ust/alt kromun payi) / 6 satir.
     --wos-visible-height klavye acilinca JS tarafindan guncelleniyor.

     ONEMLI: index.html icindeki createBoard() fonksiyonu tahtayi
       board.style.gridTemplateRows = `repeat(6, var(--cell))`
     seklinde kuruyor. Yani satir yuksekligini belirleyen sey --cell
     degiskenidir; yalnizca .cell secicisini kucultmek tahtayi daraltmaz
     (olculen: hucre 31px'e indigi halde satir 48px kaliyordu).
     Bu yuzden dogrudan --cell degiskenini eziyoruz. */
  body.ha-v111-playing {
    --cell: clamp(20px, calc((var(--wos-visible-height, 600px) - 168px) / 6 - 4px), 42px) !important;
  }

  body.ha-v111-playing .cell {
    width:  var(--cell) !important;
    height: var(--cell) !important;
    font-size: clamp(11px, 4.2vw, 20px) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.10) !important;
  }

  /* --- kapsayici bosluklarini kis --- */
  body.ha-v111-playing .app {
    padding: 0 5px calc(62px + env(safe-area-inset-bottom)) !important;
    gap: 3px !important;
  }
  body.ha-v111-playing .game-main,
  body.ha-v111-playing .multi-game {
    min-height: 0 !important;
    padding: 3px 5px calc(60px + env(safe-area-inset-bottom)) !important;
  }

  /* --- alt giris kutusu daha ince --- */
  body.ha-v111-playing .mobile-native-entry { padding: 4px !important; border-radius: 12px !important; }
  body.ha-v111-playing .mobile-native-prefix,
  body.ha-v111-playing .mobile-native-entry input,
  body.ha-v111-playing .mobile-native-submit { height: 38px !important; }
  body.ha-v111-playing .mobile-native-entry input { font-size: 16px !important; }
}

/* Cok kisa ekranlarda (buyuk klavye) durum yazisini tamamen gizle;
   ayni bilgi zaten HUD'da ve tahtada gorunuyor. */
@media (max-width: 820px) and (max-height: 400px) {
  body.ha-v111-playing .status { display: none !important; }
  body.ha-v111-playing .hud .pill { display: none !important; }
}