/*
 * mobile-foundation-v219.css — Altı oyunun ortak mobil zemini.
 *
 * KAPSAM KURALI
 *   Buradaki her kural ya bir mobil sorgu içindedir ya da `body.wos-mobile`
 *   altındadır. Masaüstü görünümü bu dosyadan etkilenmez.
 *
 *   Renk, arka plan, logo, görsel kimlik BURADA TANIMLANMAZ. Bu dosya
 *   yalnızca ölçü, boşluk, güvenli alan ve dokunma hedefi işini yapar.
 */

:root {
  /* Görüntü alanı birimleri. Modern tarayıcı dvh kullanır; desteklemeyen
     Safari sürümlerinde JS'in ölçtüğü gerçek değere düşer. */
  --wos-vh-fallback: 100vh;
  --wos-safe-top: env(safe-area-inset-top, 0px);
  --wos-safe-right: env(safe-area-inset-right, 0px);
  --wos-safe-bottom: env(safe-area-inset-bottom, 0px);
  --wos-safe-left: env(safe-area-inset-left, 0px);

  /* Başparmakla rahat basılan en küçük hedef. */
  --wos-touch: 44px;
}

@supports (height: 100dvh) {
  :root { --wos-vh-fallback: 100dvh; }
}

/*
 * `--wos-app-height` JS tarafından her ölçümde yazılır. Betik hiç çalışmazsa
 * (eski cihaz, hata) dvh/vh yedeği devreye girer; sayfa yine de doğru açılır.
 */
:root {
  --wos-app-height: var(--wos-vh-fallback);
  --wos-visible-height: var(--wos-vh-fallback);
}

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

  /* ------------------------- güvenli alan (safe area) ------------------------ */

  /*
   * Çentik/Dynamic Island ve alt home indicator alanına taşan sabit öğeler
   * için ortak yardımcılar. Oyun dosyaları bu sınıfları kullanır; kendi
   * `env()` hesabını tekrarlamaz.
   */
  .wos-safe-top { padding-top: max(var(--wos-safe-top), 0px); }
  .wos-safe-bottom { padding-bottom: max(var(--wos-safe-bottom), 0px); }
  .wos-safe-x {
    padding-right: max(var(--wos-safe-right), 0px);
    padding-left: max(var(--wos-safe-left), 0px);
  }

  /* -------------------------- dokunma hedefi ölçüsü ------------------------- */

  /*
   * Görsel boyut küçük kalabilir; DOKUNMA alanı büyür. Bu yüzden `min-height`
   * ile birlikte hizalama korunur, düğmenin görünümü değişmez.
   *
   * Genel `button` seçicisi bilerek kullanılmadı: oyunların kendi ızgara
   * hücreleri (harf kutuları, klavye tuşları, takım rozetleri) de <button>.
   * Yalnız bu sınıfı taşıyan öğeler büyütülür.
   */
  .wos-tap,
  [data-wos-tap] {
    position: relative;
    min-width: var(--wos-touch);
    min-height: var(--wos-touch);
  }

  /* Görsel olarak küçük kalması gereken düğmeler için görünmez genişletme. */
  .wos-tap-halo::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--wos-touch));
    height: max(100%, var(--wos-touch));
    transform: translate(-50%, -50%);
    content: "";
  }

  /* --------------------------- kaydırma davranışı --------------------------- */

  body.wos-mobile {
    /* Yatay taşma mobilde her zaman bir hatadır; kesilecek içerik varsa
       ilgili kap kendi içinde kaydırılır. */
    overflow-x: hidden;
  }

  /* Kendi içinde kayan alanlar sayfayı sürüklemesin. */
  .wos-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Klavye açıkken tarayıcı, içerik yüksekliği değiştiğinde kaydırmayı
     "sabitlemeye" çalışır ve yazarken sayfa zıplar. */
  body.wos-keyboard-open {
    overflow-anchor: none;
  }

  /* --------------------- dokunma/odak temel davranışları -------------------- */

  /*
   * V154/V155 kabuk dosyalarından devralınan davranışlar. O dosyalar büyük
   * ölçüde artık var olmayan alt gezinti şeridini biçimlendiriyordu; hâlâ
   * gerekli olan bu birkaç kural buraya taşındı.
   */
  button,
  a,
  input,
  select,
  textarea { touch-action: manipulation; }

  button,
  a,
  [role="button"] { -webkit-tap-highlight-color: transparent; }

  /* Klavyeyle gezinen kullanıcı için görünür odak halkası. */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid rgba(244, 195, 85, .72);
    outline-offset: 2px;
  }

  /* Yapışkan başlıkların altına kaydırılan öğe gizlenmesin. */
  html { scroll-padding-top: 86px; }

  .modal-backdrop,
  .how-to-modal { overscroll-behavior: contain; }

  /* ----------------------------- modal kilidi ------------------------------ */

  /*
   * Modal açıkken arka plan kaymaz, ama kullanıcının konumu kaybolmaz:
   * konum `--wos-page-lock-top` ile korunur, kapanınca geri verilir.
   */
  body.wos-modal-open:not(.wos-page-locked) {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* ------------------------- klavye üstü aksiyon şeridi --------------------- */

  /*
   * Klavye açıkken ana aksiyon düğmesi klavyenin ALTINDA kalmasın diye
   * kullanılan ortak konumlandırma. Oyun dosyaları yalnızca bu sınıfı verir.
   */
  .wos-above-keyboard {
    position: fixed;
    right: 0;
    bottom: calc(var(--wos-keyboard-offset, 0px) + max(var(--wos-safe-bottom), 8px));
    left: 0;
    z-index: 80;
    transition: bottom .16s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .wos-above-keyboard { transition: none; }
  }
}

/* ------------------------------ hareket tercihi ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  /*
   * Sanatsal animasyonlar kaldırılmaz; yalnızca sürekli dönen/yanıp sönen
   * yardımcı hareketler durur. Oyun animasyonlarına dokunulmaz.
   */
  .wos-pulse,
  .wos-shimmer {
    animation: none !important;
  }
}