/*
 * futbol-atlasi/mobile-v297.css — Futbol Atlası mobil uyarlaması.
 *
 * NEDEN AYRI DOSYA
 *   `styles.css` hem masaüstünü hem mobili tanımlıyor ve dokuz oyun içinde
 *   en yoğun düzenlerden birine sahip. O dosyaya dokunmak masaüstü
 *   görünümünü riske atardı. Bu dosya EN SONDA yüklenir, yalnız dokunmatik
 *   sorguların içinde çalışır ve mevcut mobil kırılım noktasını (720px)
 *   olduğu gibi kullanır — yeni bir kırılım sistemi kurmaz.
 *
 * NE DEĞİŞMEZ
 *   Renk paleti, kart tasarımı, tipografi, marka kimliği, oyun akışı.
 *   Burada yalnız ölçü, güvenli alan, dokunma hedefi ve klavye davranışı var.
 */

/* ========================================================================== */
/*  1. GERÇEK MOBİL GÖRÜNTÜ ALANI                                             */
/* ========================================================================== */

/*
 * `100vh` Safari'de adres çubuğu AÇIKKEN de kapalıymış gibi ölçülür: sayfa
 * ekrandan yaklaşık 60–90 piksel taşar ve alttaki düğmeler görünmez olur.
 * `100dvh` gerçek görünür yüksekliği verir; desteklemeyen tarayıcıda
 * V219 zemininin ölçtüğü değere düşülür.
 */
@media (pointer: coarse), (max-width: 900px) {
  body { min-height: var(--wos-app-height, 100vh); }

  .home-shell,
  .mode-shell,
  .lobby-shell,
  .session-shell,
  .loading-screen,
  .final-shell,
  .online-final-shell {
    min-height: var(--wos-app-height, 100vh);
  }

  .lobby-entry { min-height: auto; }
}

@supports (height: 100dvh) {
  @media (pointer: coarse), (max-width: 900px) {
    body,
    .home-shell,
    .mode-shell,
    .lobby-shell,
    .session-shell,
    .loading-screen,
    .final-shell,
    .online-final-shell {
      min-height: 100dvh;
    }
  }
}

/* ========================================================================== */
/*  2. GÜVENLİ ALAN (Dynamic Island, çentik, Home Indicator)                   */
/* ========================================================================== */

/*
 * `viewport-fit=cover` ile sayfa artık ekranın köşelerine kadar uzanıyor.
 * Kabuk kapları kendi yatay dolgularına güvenli alan payını EKLER; değer
 * sıfırsa (Android, masaüstü) hiçbir şey değişmez.
 */
@media (pointer: coarse), (max-width: 900px) {
  .home-shell,
  .mode-shell,
  .lobby-shell,
  .session-shell,
  .final-shell,
  .online-final-shell {
    padding-left: calc(14px + max(var(--wos-safe-left, 0px), 0px));
    padding-right: calc(14px + max(var(--wos-safe-right, 0px), 0px));
    padding-bottom: calc(38px + max(var(--wos-safe-bottom, 0px), 0px));
  }

  /*
   * Üst şerit çentiğin/Dynamic Island'ın altından başlasın.
   *
   * `height:auto; min-height:106px` denendi ve ŞERİDİ 1 PİKSEL BÜYÜTTÜ:
   * `styles.css` şeride 1 piksellik alt kenarlık veriyor; sabit yükseklik
   * kenarlığı içine alırken `min-height` almıyor. Bir piksel de olsa bu,
   * ana ekranın görünümünün değişmesi demek. Bu yüzden yükseklik SABİT
   * kalır; üzerine yalnız güvenli alan payı EKLENİR. Pay sıfırsa (Android,
   * masaüstü, çentiksiz iPhone) ölçü birebir eskisiyle aynıdır.
   */
  .site-header { padding-top: max(var(--wos-safe-top, 0px), 0px); }
}

@media (max-width: 720px) {
  .site-header { height: calc(106px + max(var(--wos-safe-top, 0px), 0px)); }
}

@media (min-width: 721px) and (max-width: 980px) and (pointer: coarse) {
  .site-header { height: calc(82px + max(var(--wos-safe-top, 0px), 0px)); }
}

/* ========================================================================== */
/*  3. DOKUNMA HEDEFLERİ                                                      */
/* ========================================================================== */

@media (pointer: coarse), (max-width: 900px) {
  /*
   * Ölçüldü: geri oku 30x38, dil düğmeleri 78x28. İkisi de parmakla
   * ıskalanıyordu. Görsel boyut korunur — büyüyen yalnız basılabilir alan.
   */
  .back-button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 6px;
  }

  /* Ana ekranda geri oku yalnız hizalama için duruyor (`visibility:hidden`).
     Orada büyütmenin bir faydası yok; üst şeridi bir piksel kaydırıyordu. */
  .home-shell .back-button {
    min-width: 30px;
    min-height: 0;
    padding: 10px 0;
  }

  /*
   * Dil düğmeleri 78x28 piksel ölçüldü: yükseklik parmak için yetersiz.
   * Hapı BÜYÜTMEK üst şeridi 1 piksel aşağı itiyordu — yani ana ekranın
   * görünümü değişiyordu. Bunun yerine görünmez bir dokunma halkası
   * eklenir: hap aynı 28 pikselde kalır, basılabilir alan 44 piksele çıkar.
   */
  .language-switcher { position: relative; }

  /* Yatay dolgu DEĞİŞMEZ: 11 pikselden 13'e çıkarmak hapı 4 piksel
     genişletiyordu. Genişlik zaten 78 piksel — parmak için yeterli;
     eksik olan yalnız yükseklikti, onu da halka çözüyor. */
  .language-option { position: relative; }

  .language-option::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 44px;
    transform: translateY(-50%);
    content: "";
  }

  /*
   * Tur içi yardımcı düğmeler. Ölçüldü (390x844, telefon):
   *   #career-hint 119x23  · #career-skip 115x36  · #chain-skip 286x38
   * Üçü de `styles.css` içinde açık `min-height`/`padding` taşıdığı için
   * genel bir kural yetmiyor; aynı seçiciler burada mobil sorgu altında
   * tekrarlanır. Yazı boyu, renk ve kenarlık DEĞİŞMEZ — yalnız basılabilir
   * yükseklik 44 piksele çıkar.
   */
  .text-button,
  .career-column-jump,
  .career-actions button,
  .career-actions .career-skip,
  .chain-actions .chain-skip {
    min-height: 44px;
    padding-block: 10px;
  }

  /* Yan yana duran üç düğme 360 piksellik ekranda sıkışıyor; sarma zaten
     tanımlı, burada yalnız satır aralığı nefes alır. */
  .career-actions,
  .chain-actions {
    row-gap: 8px;
  }

  /* Öneri satırları: bir satır bir parmak. */
  .suggestions button {
    min-height: 56px;
    padding: 11px 12px;
  }

  /*
   * Transfer bedeli sürgüsü. Varsayılan iOS/Android sürgü tutamağı
   * yaklaşık 20 piksel; parmakla tutması zor. Yol (track) kalınlaşmadan
   * yalnız tutamak ve basılabilir yükseklik büyür.
   */
  .fee-control input[type="range"] {
    height: 44px;
    /* Sürgüyü sürüklerken sayfa kaymasın; V219 zemini bunu `.wos-drag-surface`
       ile de yapıyor, burada doğrudan öğeye veriliyor. */
    touch-action: none;
  }

  .fee-control input[type="range"]::-webkit-slider-thumb {
    width: 30px;
    height: 30px;
  }

  .fee-control input[type="range"]::-moz-range-thumb {
    width: 30px;
    height: 30px;
  }
}

/* ========================================================================== */
/*  4. MOBİL KLAVYE                                                           */
/* ========================================================================== */

/*
 * ÖNERİ LİSTESİ KLAVYENİN ARKASINDA KALIYORDU.
 *
 * `.suggestions` mutlak konumlu ve `top: 100%` ile yazı alanının altına
 * çıpalanmış. 844 piksellik bir telefonda klavye açıldığında görünür alan
 * ~390 piksele iniyor; liste 330 piksele kadar uzayabildiği için alt yarısı
 * klavyenin altında kalıyordu.
 *
 * Çözüm listeyi taşımak DEĞİL — yüksekliğini gerçek görünür alana bağlamak.
 * `--wos-visible-height` ve `--wos-keyboard-offset` değerlerini V219 zemini
 * her ölçümde yazıyor.
 */
@media (pointer: coarse), (max-width: 900px) {
  .suggestions {
    max-height: min(
      330px,
      calc(var(--wos-visible-height, 100vh) - var(--wos-keyboard-offset, 0px) - 250px)
    );
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Klavye açıkken listenin boyu, yazı alanının ALTINDA gerçekten kalan
   * boşluk kadardır. Bu boşluğu CSS bilemez (medya sorguları klavyeyi
   * görmez), bu yüzden değeri ortak katman ölçer ve
   * `--wos-dropdown-max` olarak yazar. Klavye kapanınca değişken silinir
   * ve yukarıdaki 330 piksellik varsayılan geri gelir.
   */
  body.wos-keyboard-open .suggestions {
    max-height: var(--wos-dropdown-max, 240px);
  }

  /* Kariyer önerileri akış içinde (position: static) ve iki sütunlu; aynı
     ölçüyü kullanır, yalnız tabanı daha yüksektir. */
  .career-suggestions {
    max-height: max(200px, calc(var(--wos-visible-height, 100vh) - 300px));
  }

  body.wos-keyboard-open .career-suggestions {
    max-height: var(--wos-dropdown-max, 240px);
  }

  /*
   * iOS'ta 16 pikselden küçük yazı taşıyan alana dokunulduğunda sayfa
   * kendiliğinden yakınlaşır. Bu alanlar `font: inherit` ile geliyor;
   * taban 16 piksele çekilir, görünüm neredeyse aynı kalır.
   */
  .lobby-form input,
  .career-answer input,
  .chain-builder input {
    font-size: max(16px, 1em);
  }

  /*
   * Klavye açıkken cevap satırı ekranda kalsın. Sayfayı kilitlemek yerine
   * yalnız oturum kabuğunun alt boşluğu klavye kadar açılır — böylece
   * tarayıcı odaklı alanı yukarı kaydırabilir ve düzen zıplamaz.
   */
  body.wos-keyboard-open .session-shell {
    padding-bottom: calc(var(--wos-keyboard-offset, 0px) + 24px);
  }

  /* Klavye açıkken pahalı gölge/animasyon her tuşta yeniden boyanmasın. */
  body.wos-keyboard-open .round-card,
  body.wos-keyboard-open .suggestions {
    box-shadow: none;
  }
}

/*
 * V219 zemini klavye açılınca gövdeyi `position:fixed` ile kilitliyor.
 * Bu oyunda kilit İSTENMEZ: öneri listesi yazı alanının hemen altında
 * duruyor ve gövde kilitlendiğinde her tuşta yerinden oynuyor. Muafiyet
 * `mobile-v297.js` içinde `WOS_NO_PAGE_LOCK` ile veriliyor; buradaki
 * öznitelik ikinci güvence.
 */

/* ========================================================================== */
/*  5. OYUN EKRANI — ALT AKSİYON ŞERİDİ                                       */
/* ========================================================================== */

/*
 * `.round-footer` turun ana çağrısını taşıyor ("Onayla", "Sonraki tur").
 * Telefonda kartın en altında, sayfanın dibinde kalıyor ve oyuncu her turda
 * aşağı kaydırmak zorunda kalıyordu. Telefonda şerit yapışkan hâle gelir:
 * ana düğme her zaman başparmağın altında, Home Indicator'ın ÜSTÜNDE durur.
 */
@media (max-width: 720px) and (pointer: coarse) {
  .round-footer {
    position: sticky;
    bottom: calc(max(var(--wos-safe-bottom, 0px), 0px) + 8px);
    z-index: 6;
    /* Kartın kendi zemin rengiyle aynı; görsel kimlik değişmez. */
    background: var(--panel);
    box-shadow: 0 -8px 24px rgba(13, 27, 43, .10);
  }

  .round-footer .primary-button,
  .round-footer .secondary-button {
    min-height: 52px;
  }

  /* Klavye açıkken yapışkan şerit klavyenin üstüne biner; o sırada akışa
     dönmesi daha doğru. */
  body.wos-keyboard-open .round-footer {
    position: static;
    box-shadow: none;
  }

  /* Yapışkan şeridin altında içerik kalmasın. */
  .round-card { padding-bottom: 18px; }
}

/* ========================================================================== */
/*  6. KÜÇÜK VE KISA EKRANLAR                                                 */
/* ========================================================================== */

/* 360 piksel ve altı: yatay taşma riski taşıyan tek yer zincir yolu. */
@media (max-width: 380px) {
  .home-intro h1 { font-size: clamp(36px, 12vw, 54px); }
  .game-card { min-height: 360px; padding: 18px; }
  .game-card img { height: 200px; }
  .game-card-copy { bottom: 18px; left: 18px; right: 34px; }
  .game-card-copy strong { font-size: 24px; }
  .fee-control output { font-size: 52px; }
  .room-code span { font-size: 24px; letter-spacing: .14em; }
  .transfer-player h2 { font-size: 32px; }
}

/* Kısa ekran (yatay telefon veya klavye açık): düşey boşluklar sıkışır. */
@media (max-height: 560px) and (pointer: coarse) {
  .site-header { min-height: 64px; grid-template-rows: 64px; height: auto; }
  .site-header .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .round-card { min-height: 0; padding-block: 16px; }
  .session-layout { padding-top: 10px; padding-bottom: 16px; }
  .fee-control output { font-size: 40px; margin: 6px 0 14px; }
  .mode-heading { padding-block: 22px 18px; }
  .mode-asset-wrap { height: 160px; width: 160px; min-height: 0; min-width: 0; }
}

/* ========================================================================== */
/*  7. TABLET                                                                 */
/* ========================================================================== */

/*
 * 720–1023 piksel arası dokunmatik ekran: `styles.css` bu aralıkta zaten
 * tek sütuna iniyor (max-width:980px). Tablette bu, geniş ekranda yapayalnız
 * duran devasa kartlar demek. İçerik okunabilir bir genişlikte ortalanır —
 * masaüstü düzeni sıkıştırılmaz, telefon düzeni de gereksiz büyütülmez.
 */
@media (min-width: 721px) and (max-width: 1023px) and (pointer: coarse) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
  .game-card { min-height: 400px; }
  .play-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
  .session-layout { max-width: 760px; }
  .lobby-form { max-width: 520px; }
  .round-card { min-height: 0; }
}

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

/*
 * Tarayıcı çubuğu yokken üst şerit gerçekten ekranın tepesinde başlar;
 * durum çubuğu payı `env()` üzerinden zaten yukarıda ekleniyor. Burada
 * yalnız oyun alanına ayrılan yer biraz büyür: masaüstünden devralınan
 * geniş üst boşluk telefonda gereksiz.
 */
@media (display-mode: standalone), (display-mode: fullscreen) {
  @media (pointer: coarse) {
    .home-intro { padding-top: 26px; }
    .mode-heading { padding-top: 30px; }
    .session-layout { padding-top: 12px; }
  }
}

html.wos-standalone .site-header {
  padding-top: max(max(var(--wos-safe-top, 0px), 0px), 6px);
}

/* ========================================================================== */
/*  9. ANA MENÜ DÜĞMESİ                                                       */
/* ========================================================================== */

/*
 * Bu oyunda portala dönüş düğmesi hiç yoktu; diğer sekiz oyunun üst
 * şeridinde duran ev ikonu buraya da kondu (`app.js`, `header()`).
 *
 * Görsel dil geri düğmesinden KOPYALANDI: aynı yazı boyu, aynı kalınlık,
 * aynı harf aralığı. Yeni bir düğme tarzı üretilmedi.
 *
 * Kural bu dosyada ve MEDYA SORGUSUNUN DIŞINDA: düğme masaüstünde de,
 * tablette de, telefonda da görünmeli.
 */
.header-lead {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-self: start;
  min-width: 0;
}

.atlas-home-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 750;
  gap: 7px;
  letter-spacing: 0.04em;
  padding: 10px 8px 10px 0;
  text-decoration: none;
}

.atlas-home-button svg {
  height: 19px;
  width: 19px;
  flex: 0 0 auto;
}

.atlas-home-button:hover { color: var(--copper); }

.atlas-home-button:focus-visible {
  outline: 3px solid rgba(19, 140, 160, 0.28);
  outline-offset: 3px;
}

/*
 * `styles.css` ana ekranda geri okunu gizliyor (`visibility:hidden`).
 * Ana menü düğmesi ORADA DA görünür kalmalı — asıl işlevi zaten o ekranda
 * portala dönmek.
 */
.home-shell .atlas-home-button { visibility: visible; }

/* Masaüstünde şerit alçalıyor; düğme de onunla birlikte. */
@media (min-width: 981px) {
  .atlas-home-button { font-size: 11px; padding: 8px 6px 8px 0; }
  .atlas-home-button svg { height: 17px; width: 17px; }
}

/*
 * Telefonda yazı gizlenir, ikon kalır — geri düğmesi de aynısını yapıyor
 * (`styles.css`: `.back-button span{display:none}`). Böylece dar şeritte
 * iki düğme yan yana sığar ve dokunma alanı 44 pikselin altına inmez.
 */
@media (max-width: 720px) {
  .atlas-home-button span { display: none; }
  .atlas-home-button {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 10px 4px;
  }
  .atlas-home-button svg { height: 21px; width: 21px; }
  .header-lead { gap: 0; }
}

/*
 * ÜST ŞERİT TELEFONDA YAPIŞKAN.
 *
 * Ölçüldü: ana menü düğmesi eklendikten sonra oyun ekranlarında şerit
 * yukarı kayıyor ve düğme -245. piksele düşüyordu; yani tur ortasında
 * portala dönmek için önce yukarı kaydırmak gerekiyordu. Diğer sekiz
 * oyunda üst şerit mobilde zaten yapışkan; bu oyun istisnaydı.
 *
 * Kural yalnız DİKEY tutuşta çalışır. Yatayda görünür yükseklik 390
 * pikselin altına iner ve orada kalıcı bir şerit oyun alanının üçte
 * birini yer — Harf Avı ve Son Harf'te aynı sebeple akışa döndürülmüştü.
 */
@media (pointer: coarse) and (orientation: portrait) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    /* Şerit içeriğin üstünden kayarken arkası görünmesin. */
    background: var(--paper);
  }

  /* Kaydırılan hedef şeridin altında kalmasın. */
  .session-shell,
  .mode-shell,
  .lobby-shell { scroll-padding-top: 118px; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .site-header { position: relative; }
}

/* ========================================================================== */
/* 10. ADLAR KELİME ORTASINDAN BÖLÜNMEZ                                       */
/* ========================================================================== */

/*
 * `styles.css` kulüp ve futbolcu adlarına `overflow-wrap: anywhere` (ve
 * kariyer adlarına ayrıca `hyphens: auto`) veriyor. Kutudan taşmayı
 * önlüyor ama okunuşu bozuyor:
 *     "Grenoble" → "Grenobl / e",  "Galatasaray" → "Galatasa / ray"
 *
 * Kırılma kapatılır; sığdırma işini `assets/shared/fit-text-v297.js`
 * yapar — adı ölçer, gerekirse yazı boyunu küçültür, ancak taban boyda
 * hâlâ sığmıyorsa KELİME SINIRINDAN sarar.
 *
 * Medya sorgusu yok: dar sütun masaüstünde de oluşuyor.
 */
.career-stop .club-name,
.chain-node strong,
.suggestions strong,
.club-route .club-name {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/*
 * AD, SÜTUNUNUN TAMAMINI KULLANIR.
 *
 * Ölçüldü (360x640, yoğun kariyer): durak 145 piksel, ad sütunu 73 piksel,
 * ama adın kutusu yalnız 39 piksel. `.club-identity` bir esnek kap ve ad
 * içinde payını isteyemiyordu; kalan yer boşa gidiyor, sığdırıcı da olmayan
 * yere sığdırmaya çalışıyordu. Ad artık kalan genişliğin tamamını alır —
 * böylece çoğu durumda küçültmeye hiç gerek kalmaz.
 */
.career-stop .club-identity {
  flex: 1 1 auto;
  min-width: 0;
}

.career-stop .club-identity .club-name,
.career-stop > .club-name {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * DAR TELEFONDA YOĞUN KARİYERDE ARMA GİZLENİR.
 *
 * Ölçüldü (360x640, yoğun kariyer): durak 145 piksel, ad sütunu 73 piksel,
 * armanın kendisi 25 piksel — ada 39 piksel kalıyordu. On gerçek turda 48
 * addan 6'sı taban yazı boyunda bile kutusundan taşıyordu (Galatasaray,
 * Corinthians, Olympiacos, Heerenveen...).
 *
 * Arma bu görünümde 22–25 piksellik bir süs; kulübü zaten adı söylüyor.
 * Yalnız DAR ekranda ve YOĞUN kariyerde gizlenir; sütunun tamamı ada
 * kalır. Geniş telefon, tablet, masaüstü ve seyrek kariyerlerde arma
 * yerinde durur.
 */
@media (max-width: 430px) {
  .career-timeline[data-density="tight"] .career-stop .club-crest.timeline,
  .career-timeline[data-density="dense"] .career-stop .club-crest.timeline {
    display: none;
  }

  .career-timeline[data-density="tight"] .career-stop .club-identity,
  .career-timeline[data-density="dense"] .career-stop .club-identity {
    gap: 0;
  }
}