/*
 * ayni-frekans/mobile-v219.css — Aynı Frekans mobil düzeni.
 *
 * OYUNUN MOBİLDEKİ ÖZEL DURUMU
 *   İki oyuncu AYNI ekranda, yan yana iki alana yazar. Telefonda bu iki alan
 *   yan yana sığmaz; klavye açıldığında ise yazan oyuncunun alanı klavyenin
 *   arkasında kalıyordu.
 *
 *   Çözüm: klavye açıkken YAZAN kart öne çıkar, diğeri kompakt bir şeride
 *   iner — ama EKRANDAN KAYBOLMAZ. Böylece sıra, tur ve rakip durumu
 *   görünürken oyuncu yazdığı kelimeyi de görür.
 *
 * Renk kimliği (mavi/mercan/nane/altın takım renkleri), amblemler ve
 * arka plan: DEĞİŞTİRİLMEDİ.
 */

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

  /* ======================= 1) Kurulum akışı ferahlar ====================== */

  html body .setup-mode-panel .mode-button,
  html body #localModeButton,
  html body #onlineModeButton,
  html body #startGame,
  html body #startOnlineGame,
  html body #createOnlineRoom,
  html body #joinOnlineRoom {
    min-height: 50px !important;
  }

  /* iOS otomatik yakınlaştırmayı önleyen eşik. */
  html body #setupView input,
  html body #setupView select,
  html body #leftWord,
  html body #rightWord {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Oda kodu büyük, okunur ve tek dokunuşta seçilebilir. */
  html body #roomCodeValue,
  html body .room-code-value {
    font-size: clamp(22px, 7vw, 30px) !important;
    letter-spacing: .12em !important;
    -webkit-user-select: all !important;
    user-select: all !important;
  }

  /* Oyuncu listesi ana alanı kapatmaz; kendi içinde kayar. */
  html body .online-player-list,
  html body #onlineWaitingPlayers {
    max-height: 210px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* ======================= 2) Oyun ekranı, klavye kapalı ================== */

  /* Skor tablosu dar ekranda taşmaz; takımlar sarar. */
  html body #gameView .scoreboard {
    gap: 6px !important;
    padding: 8px !important;
  }

  html body #gameView .score-name {
    overflow: hidden !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* İki yazı alanı telefonda alt alta: yan yana sığmıyordu. */
  @media (max-width: 640px) {
    html body #gameView .input-stage {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }
    html body #gameView #syncCore {
      justify-self: center !important;
    }
  }

  html body #gameView #submitLeft,
  html body #gameView #submitRight {
    min-height: 48px !important;
  }

  /* ======================= 3) KLAVYE AÇIK — oyuna odaklı ================== */

  html body.wos-keyboard-open #gameView .play-panel {
    position: fixed !important;
    top: var(--wos-viewport-top, 0px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 70 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    height: var(--wos-visible-height, 100dvh) !important;
    max-height: var(--wos-visible-height, 100dvh) !important;
    margin: 0 !important;
    padding:
      max(var(--wos-safe-top), 8px)
      max(var(--wos-safe-right), 12px)
      10px
      max(var(--wos-safe-left), 12px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  /*
   * ÜST BLOK — kullanıcı ne için cevap yazdığını unutmasın:
   * tur, sıradaki takım ve süre klavyenin üstünde kalır.
   */
  html body.wos-keyboard-open #gameView #roundLabel,
  html body.wos-keyboard-open #gameView #activeTeamName,
  html body.wos-keyboard-open #gameView .timer-wrap,
  html body.wos-keyboard-open #gameView #livesBar {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin: 0 !important;
  }

  html body.wos-keyboard-open #gameView #activePlayers {
    flex: 0 0 auto !important;
    order: 2 !important;
    overflow: hidden !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.wos-keyboard-open #gameView .timer-wrap {
    transform: scale(.86) !important;
    transform-origin: center top !important;
  }

  /* Yazı alanları bloğu kalan yeri alır. */
  html body.wos-keyboard-open #gameView .input-stage {
    flex: 1 1 auto !important;
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /*
   * Yazmayan kartın açılış bilgisi (isim + durum) kalır, yazı alanı iner.
   * Böylece rakibin hazır olup olmadığı görünür ama yer kaplamaz.
   */
  html body.af-typing-left.wos-keyboard-open #gameView .card-right .word-input-wrap,
  html body.af-typing-right.wos-keyboard-open #gameView .card-left .word-input-wrap {
    display: none !important;
  }

  html body.af-typing-left.wos-keyboard-open #gameView .card-right,
  html body.af-typing-right.wos-keyboard-open #gameView .card-left {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    opacity: .82 !important;
  }

  /*
   * Yazan kart öne çıkar ve klavyenin hemen üstünde durur.
   * `margin-top:auto` sütunda kalan boşluğu üstte toplar; böylece kart,
   * içerik az olsa da klavyeye yapışık kalır, ekranın ortasında asılı
   * durmaz.
   */
  html body.af-typing-left.wos-keyboard-open #gameView .card-left,
  html body.af-typing-right.wos-keyboard-open #gameView .card-right {
    flex: 0 0 auto !important;
    order: 9 !important;
    margin-top: auto !important;
  }

  /*
   * Panel klavye açıkken görünür alanı kaplayan SABİT bir katman olduğu için,
   * arkasında kalan akış içeriği cam zeminin içinden okunuyordu: skor tablosu
   * ile "Oyuncu 1 ve Oyuncu 2" satırı üst üste biniyor, düğme yazıları hayalet
   * gibi görünüyordu. Panel bu durumda kendi rengiyle opaklaşır — renk
   * paletinden yeni bir ton getirilmez, oyunun kendi lacivert zemini kullanılır.
   */
  html body.wos-keyboard-open #gameView .play-panel {
    background: #0b1f38 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /*
   * Dış skor tablosu panelin ARKASINDA kalıyor. Klavye açıkken gizlenir;
   * aynı bilgi (sıradaki takım, hedef puan, süre) panelin kendi üst bloğunda
   * zaten duruyor. Klavye kapanınca tablo geri gelir.
   */
  html body.wos-keyboard-open #gameView .scoreboard,
  html body.wos-keyboard-open #gameView #syncCore,
  html body.wos-keyboard-open #gameView #attemptHistory,
  html body.wos-keyboard-open #gameView #rotationLeaderboard,
  html body.wos-keyboard-open .lang-switch {
    display: none !important;
  }

  /* Kart, boş alanı doldurmak için gereksizce uzamasın. */
  html body.wos-keyboard-open #gameView .word-card,
  html body.wos-keyboard-open #gameView .card-left,
  html body.wos-keyboard-open #gameView .card-right {
    min-height: 0 !important;
    height: auto !important;
  }

  /*
   * Cevap açılış alanı, kelime gelmeden önce yüksekliğini ayırıyor ve kartın
   * ortasında büyük bir boşluk bırakıyordu. Klavye açıkken içeriği kadar yer
   * kaplar; kelime geldiğinde yine görünür.
   */
  html body.wos-keyboard-open #gameView .word-reveal {
    min-height: 0 !important;
  }

  /*
   * "Oyuncu 1 ve Oyuncu 2" satırı üst bilgi kutusunun alt kenarına biniyordu:
   * kutu mutlak konumlu bir başlık taşıyor, satır ise akışta duruyordu.
   * Sütunun kendi elemanı yapılıp araya boşluk konur.
   */
  html body.wos-keyboard-open #gameView #activePlayers {
    position: static !important;
    margin: 4px 0 0 !important;
  }

  /* Durum bildirimi ekranı kaplamaz, tek satır bilgi verir. */
  html body.wos-keyboard-open #gameView #statusBanner {
    flex: 0 0 auto !important;
    order: 10 !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

/*
 * Çok kısa GÖRÜNÜR alan: can çubuğu ve tur etiketi düşer, yazı alanı kalır.
 * Ölçü ortak zeminden gelir; medya sorgusu klavyeyi göremez.
 */
@media (max-width: 900px), (pointer: coarse) {
  html body.wos-vh-short.wos-keyboard-open #gameView #livesBar,
  html body.wos-vh-short.wos-keyboard-open #gameView #roundLabel {
    display: none !important;
  }
  html body.wos-vh-xshort.wos-keyboard-open #gameView .timer-wrap {
    transform: scale(.7) !important;
  }
}