/*
 * kariyer-koprusu/mobile-app-v282.css — Futbolcu Köprüsü mobil katmanı.
 *
 * NEDEN VAR — ÖLÇÜLEN DEĞERLER (390x844, Chromium, gerçek akış)
 *
 *   AŞAMA 1 · Oyun türü seçimi
 *     `.game-type-card` KART BAŞINA 502 piksel (görsel 316 + gövde 146).
 *     İki kart 1015 piksel; ekran 844. Yani kullanıcı iki oyun türünü
 *     AYNI ANDA göremiyor, "Bu modu seç" bağlantısı 1380. pikselde ve
 *     11 piksellik bir metin bağlantısı — düğme değil.
 *
 *   AŞAMA 2 · Maç kurulumu
 *     Sayfa 2471 piksel. `.setting-tabs` dört düğmeyi 2x2 diziyor
 *     (108 piksel), `.difficulty-tabs` üç düğmeyi 2 satıra (106 piksel).
 *     `.players-grid` 666 piksel. Ana eylem ("Oyunu Başlat") en altta.
 *
 *   AŞAMA 3 · Aktif maç  ← EN KRİTİK
 *     Klavye açıkken (görünür alan 387 piksel) yazı alanı 424–488
 *     aralığında, yani TAMAMEN görünür alanın DIŞINDA. Gönder düğmesi
 *     (496–554) ve "Pas geç" (562–608) de öyle. Kullanıcı ne yazdığını
 *     göremiyor. Ölçüm 320x568, 375x667 ve 390x844'te aynı sonucu verdi.
 *
 * KAPSAM
 *   Gate `html.view-mobile`: bu sınıfı `assets/device-auto-v275.js` yazar
 *   ve gerçek cihaz sınıflandırmasına dayanır (telefon; tablet < 960).
 *   Salt yükseklik sorgusu KULLANILMAZ, böylece alçak masaüstü
 *   penceresine telefon düzeni sızmaz.
 *
 * GÖRÜNTÜ ALANI
 *   Burada ölçüm yapılmaz. `mobile-foundation-v219.js` tek otoritedir;
 *   yalnız onun yazdıkları OKUNUR: --wos-keyboard-offset, --wos-safe-*,
 *   .wos-keyboard-open, .wos-vh-short, .wos-vh-xshort.
 */

html.view-mobile body {
  --kk-gutter: 12px;
  --kk-dock-gap: 8px;
}

/* ========================================================================
   1. UYGULAMA ŞERİDİ
   ======================================================================== */

html.view-mobile #root .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  padding:
    calc(max(var(--wos-safe-top, 0px), 0px) + 8px)
    var(--kk-gutter)
    8px !important;
}

html.view-mobile #root .topbar .brand strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* Dil düğmelerindeki yazı 10 pikseldi. */
html.view-mobile #root .portal-lang-switch button {
  min-height: 44px !important;
}

html.view-mobile #root .portal-lang-switch button > span:not(.flag) {
  font-size: 12px !important;
}

/*
 * "Ana Menü" düğmesi 38 piksellik bir daire ve `position:absolute; top:41px`
 * ile konumlanmış. Dokunma hedefi küçük, ama KUTUYU büyütmek düğmeyi
 * aşağı kaydırıyor: yükseklik 38 -> 44 olunca merkezi 60'tan 63'e çıkıyor
 * ve üst çubukla hizası bozuluyor (`tests/mobile/round5.test.mjs` bunu
 * bekçiliyor: sapma en çok 2 piksel).
 *
 * Bu yüzden görünen kutu büyütülmez; yalnız DOKUNMA ALANI saydam bir
 * katmanla 46x46'ya genişletilir. Görsel merkez yerinde kalır.
 */
html.view-mobile .portal-home-button::after {
  content: "";
  position: absolute;
  inset: -4px;
}

/* ========================================================================
   2. AŞAMA 1 — OYUN TÜRÜ SEÇİMİ
   ======================================================================== */

/*
 * Kart 502 -> ~152 piksel. Görsel KALDIRILMIYOR, küçültülüyor: kare
 * sanat eseri 84 pikselik bir küçük resme iner ve METNİN SOLUNA geçer.
 * Böylece eserin tamamı görünür (kırpma yok) ve iki oyun türü tek
 * ekranda yan yana okunur. "Bu modu seç" artık metin bağlantısı değil,
 * kartın kendisi 44 pikselin çok üstünde bir dokunma alanı.
 */
html.view-mobile #root .game-type-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

html.view-mobile #root .game-type-card {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  min-height: 0 !important;
  padding: 12px !important;
  text-align: left !important;
}

html.view-mobile #root .game-type-card__image {
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 84px !important;
  height: 84px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

html.view-mobile #root .game-type-card__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

html.view-mobile #root .game-type-card__body {
  grid-column: 2 !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Kicker ("01 · KARİYER") */
html.view-mobile #root .game-type-card__body > span:first-child {
  font-size: 11px !important;
  letter-spacing: .1em !important;
}

html.view-mobile #root .game-type-card__body strong {
  display: block !important;
  margin: 2px 0 3px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

/* Açıklama: iki satır yeter, üçüncüsü kartı büyütüyor. */
html.view-mobile #root .game-type-card__body p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

html.view-mobile #root .game-type-card__action {
  grid-column: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

html.view-mobile #root .game-type-picker__top {
  margin-bottom: 12px !important;
}

html.view-mobile #root .game-type-picker__copy h1 {
  font-size: 22px !important;
  line-height: 1.15 !important;
}

html.view-mobile #root .game-type-picker__copy p {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

html.view-mobile #root .game-type-picker__copy > span {
  font-size: 11px !important;
}

/* ========================================================================
   3. AŞAMA 2 — MAÇ KURULUMU
   ======================================================================== */

/* 3.1 Oyun modu: üç seçenek, okunur, tek satırda sığan etiketler. */
html.view-mobile #root .mode-switch--three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html.view-mobile #root .mode-switch--three > button {
  min-height: 92px !important;
  padding: 10px 6px !important;
}

html.view-mobile #root .mode-switch--three > button b {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

html.view-mobile #root .mode-switch--three > button small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/*
 * 3.2 Ayar şeritleri TEK SATIRA iner.
 * Dört düğme 2x2 dizildiğinde grup 194 piksel oluyordu; yan yana
 * dizilince 46 piksellik tek satır kalıyor ve iki grupta 124 piksel
 * kazanılıyor. Dokunma hedefi 46 pikselde korunur.
 */
html.view-mobile #root .setting-tabs {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

html.view-mobile #root .setting-tabs > button {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 6px 4px !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
}

/* Üç zorluk düğmesi de tek satıra. Eski katman iki sabit sütun
   (153px 153px) yazdığı için "Zor" tek başına ikinci satıra düşüyor ve
   106 piksel yer kaplıyordu; seçicinin o kuralı yenmesi gerekiyor. */
html.view-mobile body #root .app-shell .difficulty-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
}

html.view-mobile body #root .app-shell .difficulty-tabs > button {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 6px 4px !important;
  font-size: 12.5px !important;
}

html.view-mobile #root .match-settings {
  display: grid !important;
  gap: 10px !important;
}

html.view-mobile #root .match-settings__group {
  padding: 11px !important;
}

html.view-mobile #root .match-settings__group > div:first-child b {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html.view-mobile #root .match-settings__group > div:first-child span,
html.view-mobile #root .solo-settings > div:first-child span {
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

html.view-mobile #root .solo-settings > div:first-child b {
  font-size: 13px !important;
}

/* 3.3 Mod şeridi */
html.view-mobile #root .kk-mode-bar-v219 {
  padding: 11px !important;
}

html.view-mobile #root .kk-mode-name {
  font-size: 16px !important;
}

html.view-mobile #root .kk-mode-game {
  font-size: 11px !important;
}

html.view-mobile #root .kk-mode-hint {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html.view-mobile #root .kk-mode-change {
  min-height: 44px !important;
  font-size: 12.5px !important;
}

/* 3.4 Takım seçimi kartları — 288 piksel yüksekliğin ikincil kısmı
   kısılır. Bilgi KALDIRILMAZ; yalnız daha sıkı dizilir. */
html.view-mobile #root .players-grid {
  gap: 10px !important;
}

html.view-mobile #root .player-card {
  padding: 11px !important;
}

html.view-mobile #root .club-search input {
  min-height: 46px !important;
  font-size: 16px !important; /* iOS yakınlaştırma eşiği */
}

/*
 * Takım üst verisi (Takım / Ülke / Lig) kart başına 98 piksel kaplıyor ve
 * etiketleri 6 piksele iniyordu. Bilgi KALDIRILMIYOR: tek satırlık,
 * okunur bir şeride iniyor (~46 piksel). İki kartta ~104 piksel kazanç.
 */
html.view-mobile body #root .app-shell .club-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
}

/* İlk hücre (takım adı) eski bir kuralda `grid-column: 1 / -1` taşıyor;
   üç sütun tanımlansa bile tek başına bir satır kaplayıp şeridi iki
   satıra çıkarıyordu (48 + 42 = 98 piksel). Hücreler kendi sütunlarına
   döndürülür. */
html.view-mobile body #root .app-shell .club-summary > div {
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
}

html.view-mobile body #root .app-shell .club-summary > div > b {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/*
 * "BAĞLANTI ROLÜ" kartı iki takım kartında da aynı metni tekrarlıyor
 * ("Kariyer bağlantısı") ve 6–9 piksellik yazıyla 44 piksel kaplıyor.
 * Telefonda bilgi taşımadığı için gizlenir; tablet ve masaüstünde durur.
 */
@media (max-width: 620px) {
  html.view-mobile #root .role-card {
    display: none !important;
  }
}

/* Ülke/lig üst verisi 6–9 piksele iniyordu. */
html.view-mobile body #root .app-shell .club-summary span {
  font-size: 10.5px !important;
  letter-spacing: .06em !important;
}

html.view-mobile body #root .app-shell .club-summary b {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

html.view-mobile #root .role-card span {
  font-size: 10.5px !important;
}

html.view-mobile #root .role-card strong {
  font-size: 12px !important;
}

/*
 * 3.5 ANA EYLEM PARMAK MESAFESİNDE.
 *
 * Kurulum sayfası 2471 piksel; "Oyunu Başlat" en altta duruyordu, yani
 * kullanıcı ayarları seçtikten sonra başlamak için sayfanın sonuna kadar
 * kaydırmak zorundaydı. Şerit artık YAPIŞKAN: kurulum boyunca ekranın
 * altında kalır. `position: sticky` kullanılıyor — akıştan çıkmadığı için
 * altındaki içeriği örtmez ve ek bir dolgu hesabı gerektirmez.
 *
 * Maç başladığında kurulum ekranı zaten kapanıyor; şerit de onunla gider.
 */
html.view-mobile body:not(.kk-match-active) #root .game-actions {
  position: sticky !important;
  bottom: max(var(--wos-safe-bottom, 0px), 6px) !important;
  z-index: 40 !important;
  margin-top: 12px !important;
  padding: 8px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Şeritteki düğmeler 42 piksel ve 10,5 punto idi. */
html.view-mobile #root .game-actions .btn {
  min-height: 46px !important;
  padding: 8px 6px !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

html.view-mobile #root .game-actions .btn--large {
  min-height: 52px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Klavye açıkken (takım arama alanı) şerit yol versin. */
html.view-mobile body.wos-keyboard-open #root .game-actions {
  position: static !important;
}

/* ========================================================================
   4. AŞAMA 3 — AKTİF MAÇ
   ======================================================================== */

/*
 * V296 NOTU — burada bir zamanlar `.wos-game-info` kuralı vardı.
 *
 * Sayfanın altındaki tanıtım şeridi maç boyunca 597 piksellik bir kaydırma
 * kuyruğu oluşturuyordu; bu kural onu maç sırasında telefonda gizliyordu.
 * Şerit V296'da tamamen kalktı: metin artık sayfanın akışında değil, "Rehber"
 * düğmesiyle açılan bir panelde (`assets/shared/game-guide-v296.*`). Panel
 * `position:fixed` olduğu için kuyruk üretmiyor, yani gizlenecek bir şey de
 * kalmadı.
 */

html.view-mobile body.kk-match-active #root .footer {
  display: none !important;
}

/* 4.1 Skor şeridi
   "Ana Menü" düğmesi ekranın sol üst köşesinde SABİT duruyor ve maç
   sırasında skor kartının üstüne biniyordu. Şerit düğme kadar içeriden
   başlar; düğme de maç boyunca küçülür. */
html.view-mobile #root .mobile-duel-header {
  gap: 8px !important;
}

html.view-mobile body.kk-match-active #root .mobile-duel-header {
  padding-left: 46px !important;
}

/* Maç sırasında düğme biraz geri çekilir. Ölçüsü DEĞİŞMEZ — kutuyu
   büyütüp küçültmek yukarıdaki hiza sorununu geri getirirdi; çakışma
   şeridin sol dolgusuyla çözülüyor. */
html.view-mobile body.kk-match-active .portal-home-button {
  opacity: .92 !important;
}

html.view-mobile #root .mobile-player-score {
  padding: 9px 10px !important;
}

html.view-mobile #root .mobile-player-copy {
  min-width: 0 !important;
  font-size: 12.5px !important;
}

/* 4.2 Takım alanı — isimler ÜST ÜSTE BİNMEZ. */
html.view-mobile #root .round-scoreboard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
}

html.view-mobile #root .round-team {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

html.view-mobile #root .round-team > div {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
}

html.view-mobile #root .round-team .club-badge--lg {
  flex: 0 0 auto !important;
}

/* Sağ takımın adı, kart düzeninde armanın ÜSTÜNDE kalıyordu; iki taraf
   da aynı sırada olsun (arma sonra ad). */
html.view-mobile #root .round-team--right {
  flex-direction: column !important;
}

html.view-mobile #root .round-team--right > div {
  order: 2 !important;
}

html.view-mobile #root .round-team--right .club-badge {
  order: 1 !important;
}

/* 4.3 CEVAP ALANI — klavyenin ÜSTÜNDE.
 *
 * Ölçüm: klavye açıkken görünür alan 387 piksel, yazı alanı 424–488.
 * Yani alan tamamen ekranın dışındaydı.
 *
 * Çözüm, zeminin ortak kalıbıdır (`.wos-above-keyboard`,
 * mobile-foundation-v219.css): şerit görsel görüntü alanının altına,
 * klavyenin hemen üstüne sabitlenir. Konum `--wos-keyboard-offset`
 * değişkeninden gelir — burada YENİ bir ölçüm yapılmaz.
 *
 * Yalnız klavye açıkken devreye girer; kapalıyken alan akışta kalır ve
 * masaüstü/tablet düzeni hiç değişmez.
 */
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .answer-area {
  position: fixed !important;
  right: 0 !important;
  bottom: calc(var(--wos-keyboard-offset, 0px) + max(var(--wos-safe-bottom, 0px), 6px)) !important;
  left: 0 !important;
  /* `top` ve `height` AÇIKÇA serbest bırakılmalı. Alan bir alt katmandan
     tam yükseklik alıyor; sabitlendiğinde 844 piksellik bir kutuya
     dönüşüp `bottom` çapasını anlamsız kılıyor, şerit ekranın 360 piksel
     YUKARISINA çıkıyordu (ölçüm: top -360, height 844). */
  top: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  z-index: 90 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px var(--kk-gutter) !important;
  background: linear-gradient(180deg, rgba(240, 246, 242, .94), rgba(236, 243, 238, .995)) !important;
  border-top: 1px solid rgba(16, 60, 44, .16) !important;
  box-shadow: 0 -12px 30px rgba(6, 30, 22, .16) !important;
}

/* Şerit sabitlenince akıştan çıkar; bıraktığı boşluk doldurulur ki
   altındaki geri bildirim alanı yukarı zıplamasın. */
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-play-grid {
  min-height: 1px !important;
}

/*
 * Şerit akıştan çıkınca ARDINDA BOŞLUK KALIR. Arena kendi asgari
 * yüksekliğini koruduğu için 390x844'te takım şeridi ile şerit arasında
 * ~450 piksellik boş bir alan oluşuyordu. Sahne klavye açıkken kendi
 * içeriğine iner; geriye yalnız şeridin altında kalacak kadar dolgu
 * bırakılır (geri bildirim satırı oraya düşer).
 */
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-arena,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-content,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .game-card {
  min-height: 0 !important;
  height: auto !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-content {
  padding-bottom: 16px !important;
}

/*
 * SKOR ŞERİDİ KLAVYE AÇIKKEN DE DURUR.
 *
 * Eski bir katman yer açmak için `.mobile-duel-header`ı tamamen
 * daraltıyordu (ölçüm: yükseklik 0). Kullanıcı kaç-kaç olduğunu
 * göremeden cevap yazıyordu. Şerit geri geliyor ama KOMPAKT: avatar 24,
 * tek satır, 40 piksel. Ekranın üstünde kalan bilgi sırası böylece
 * istenen hâline geliyor — skor, tur, süre, takımlar.
 */
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-duel-header {
  display: flex !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-player-score {
  min-height: 40px !important;
  padding: 5px 8px !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-player-score strong {
  font-size: 18px !important;
  line-height: 1.1 !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-player-copy {
  font-size: 11.5px !important;
  line-height: 1.15 !important;
}

/* Klavye açıkken KOMPAKT MAÇ KİPİ.
   Takımlar ve skor GÖRÜNÜR KALIR — kullanıcı hangi iki takım arasında
   oynadığını görmeden cevap yazamaz — ama daha az yer kaplar. */
/*
 * Takım alanı klavye açıkken SABİT 96 piksele kilitliydi
 * (`flex: 0 0 96px`), armalar sığıyor ama TAKIM ADLARI kırpılıyordu —
 * oysa kullanıcının hangi iki takım arasında oynadığını görmesi şart.
 * Alan kendi içeriğine göre yükselir; yer, armaları küçülterek kazanılır.
 */
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-scoreboard {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 6px !important;
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-team > div {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .club-badge--lg {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .timer-ring {
  width: 62px !important;
  height: 62px !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-player-avatar {
  width: 28px !important;
  height: 28px !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-duel-header {
  gap: 6px !important;
}

html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .mobile-player-score {
  padding: 6px 8px !important;
}

/* İkincil geri bildirim satırları klavye açıkken yer açar; asıl bilgi
   (skor, takımlar, yazı alanı) durur. */
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-feedback-stack .feedback--meta {
  display: none !important;
}

/* Çok kısa alanda (küçük telefon + klavye) yanlış hakkı rozeti de gider. */
html.view-mobile body.kk-match-active.wos-vh-xshort #root .wrong-chance-row {
  display: none !important;
}

/* 4.4 Yazı alanı ve düğmeler */
html.view-mobile #root .answer-box {
  display: grid !important;
  gap: var(--kk-dock-gap) !important;
}

html.view-mobile #root .app-shell.is-match-started .answer-box input {
  min-height: 52px !important;
  font-size: 16px !important; /* iOS Safari yakınlaştırmasını engeller */
}

html.view-mobile #root .app-shell.is-match-started .answer-box > button:not(.answer-pass-button) {
  min-height: 52px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* "Pas geç" 10 pikseldi. */
html.view-mobile #root .app-shell.is-match-started .answer-pass-button {
  min-height: 46px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Klavye açıkken şerit sıkışır ama hiçbir düğme 44'ün altına inmez. */
html.view-mobile body.wos-keyboard-open #root .app-shell.is-match-started .answer-box {
  gap: 6px !important;
}

html.view-mobile body.wos-keyboard-open #root .app-shell.is-match-started .answer-box input,
html.view-mobile body.wos-keyboard-open #root .app-shell.is-match-started .answer-box > button:not(.answer-pass-button) {
  min-height: 48px !important;
}

html.view-mobile body.wos-keyboard-open #root .app-shell.is-match-started .answer-pass-button {
  min-height: 44px !important;
}

/* 4.5 Öneri listesi — klavye açıkken yazı alanının ÜSTÜNDE açılır,
   sayfa kilidiyle çakışmaz. Kilit muafiyeti aşağıda JS ile veriliyor. */
html.view-mobile #root .suggestions {
  max-height: min(38vh, 260px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.view-mobile body.wos-keyboard-open #root .app-shell.is-match-started .suggestions {
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  max-height: min(34vh, 220px) !important;
}

html.view-mobile #root .suggestion-item {
  min-height: 48px !important;
  padding: 8px 10px !important;
}

html.view-mobile #root .suggestion-item,
html.view-mobile #root .suggestion-info {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

html.view-mobile #root .suggestion-current-club,
html.view-mobile #root .suggestion-nationality {
  font-size: 11px !important;
}

/* ========================================================================
   5. TUR SONU / MAÇ SONU
   ======================================================================== */

html.view-mobile #root .round-result-modal,
html.view-mobile #root .match-result-modal {
  max-height: calc(var(--wos-visible-height, 92dvh) - 16px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.view-mobile #root .round-result-score {
  font-size: 15px !important;
}

/* Aday havuzu sonucu tamamen kaplamasın: kendi kaydırma alanı olur.
   V266 listeyi bilerek görünür tutuyor; burada yalnız yüksekliği
   sınırlanıyor, hiçbir aday gizlenmiyor. */
html.view-mobile #root .round-candidate-grid {
  max-height: 34vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.view-mobile #root .round-candidate-grid > span {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}

html.view-mobile #root .round-continue-button {
  min-height: 50px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* ========================================================================
   6. GENEL — dokunma hedefi, yazı tabanı, odak
   ======================================================================== */

html.view-mobile #root button,
html.view-mobile #root .btn {
  min-height: 44px !important;
}

html.view-mobile #root .btn--primary,
html.view-mobile #root .btn--ghost {
  font-size: 13.5px !important;
}

html.view-mobile #root input,
html.view-mobile #root select,
html.view-mobile #root textarea {
  font-size: 16px !important;
}

html.view-mobile #root :is(button, a, input, select):focus-visible {
  outline: 2px solid #1c8f63 !important;
  outline-offset: 2px !important;
}

html.view-mobile #root button[disabled] {
  opacity: .5 !important;
}

/* Sayfanın kendisi yatay kaymaz; geniş içerik kendi kabında kayar. */
html.view-mobile body {
  overflow-x: hidden !important;
}

html.view-mobile #root .main-grid {
  min-width: 0 !important;
}

/* ========================================================================
   7. YATAY / TABLET / PWA
   ======================================================================== */

@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  html.view-mobile #root .game-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.view-mobile #root .round-scoreboard {
    gap: 6px !important;
  }

  html.view-mobile #root .club-badge--lg {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Tablet mobil düzende: iki sütun rahat sığar. */
@media (min-width: 700px) and (pointer: coarse) {
  html.view-mobile #root .game-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.view-mobile #root .game-type-card {
    grid-template-columns: 96px minmax(0, 1fr) !important;
  }

  html.view-mobile #root .players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (display-mode: standalone) {
  html.view-mobile #root .topbar {
    padding-top: calc(max(var(--wos-safe-top, 0px), 0px) + 6px) !important;
  }

  /* Ana ekrandan açıldığında "Ana Menü" düğmesi ev göstergesiyle
     çakışmasın. */
  html.view-mobile .portal-home-button {
    margin-bottom: max(var(--wos-safe-bottom, 0px), 0px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.view-mobile #root .answer-area,
  html.view-mobile #root .suggestions {
    transition: none !important;
  }
}

/* ========================================================================
   8. KURULUM EKRANI TELEFONA GÖRE YENİDEN SIRALANIR
   ========================================================================

   Masaüstünde sıra "ayarları oku, sonra takımları seç"tir; geniş ekranda
   hepsi aynı anda görünür. Telefonda 1279 piksellik bir sütuna dönüşüyor
   ve kullanıcı ASIL işine (takım seçimi + başlat) ulaşmak için 671 piksel
   kaydırmak zorunda kalıyordu.

   Kart mobilde esnek sütuna çevrilir ve sıra telefona göre kurulur:
     1 mod şeridi · 2 oyun modu · 3 ayar özeti · 4 (açılınca) ayarlar
     5 takım seçimi · 6 eylemler
   Ayarlar varsayılan olarak KAPALIDIR; değerleri özet satırında yazar.

   `order` verilmeyen bir öğe 0 alıp en üste düşer (CLAUDE.md'deki Harf Avı
   tuzağı), bu yüzden kartın bütün çocuklarına açık sıra verilir. */

html.view-mobile #root .app-shell #game.game-card {
  display: flex !important;
  flex-direction: column !important;
}

html.view-mobile #root .app-shell #game.game-card > * {
  order: 5;
}

html.view-mobile #root .app-shell #game.game-card > .kk-mode-bar-v219 { order: 1; }
html.view-mobile #root .app-shell #game.game-card > .mode-switch { order: 2; }
html.view-mobile #root .app-shell #game.game-card > .kk-settings-summary-v282 { order: 3; }
html.view-mobile #root .app-shell #game.game-card > .solo-settings { order: 4; }
html.view-mobile #root .app-shell #game.game-card > .match-settings { order: 4; }
html.view-mobile #root .app-shell #game.game-card > .players-grid { order: 6; }
html.view-mobile #root .app-shell #game.game-card > .game-actions { order: 7; }

/* Ayarlar kapalıyken yer kaplamaz; hiçbir seçenek KALDIRILMAZ. */
html.view-mobile body:not(.kk-settings-open-v282) #root .app-shell #game.game-card > .solo-settings,
html.view-mobile body:not(.kk-settings-open-v282) #root .app-shell #game.game-card > .match-settings {
  display: none !important;
}

/* Özet düğmesi */
.kk-settings-summary-v282 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 2px 10px !important;
  width: 100% !important;
  min-height: 56px !important;
  margin: 0 0 10px !important;
  padding: 10px 13px !important;
  border: 1px solid rgba(16, 60, 44, .18) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #f3f8f4) !important;
  text-align: left !important;
  cursor: pointer;
}

.kk-settings-summary__label {
  grid-column: 1;
  color: #14603f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.kk-settings-summary__chips {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.kk-settings-summary__chips b {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(20, 96, 63, .10);
  color: #14472f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.kk-settings-summary__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-style: normal;
  font-size: 18px;
  color: #14603f;
  transition: transform .2s ease;
}

body.kk-settings-open-v282 .kk-settings-summary__arrow {
  transform: rotate(180deg);
}

body.kk-settings-open-v282 .kk-settings-summary-v282 {
  border-color: rgba(20, 96, 63, .42) !important;
  background: linear-gradient(180deg, #eef7f1, #e4f1e9) !important;
}

/* Maç başlayınca kurulum ekranı yok; özet de görünmez. */
html.view-mobile body.kk-match-active .kk-settings-summary-v282 {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .kk-settings-summary__arrow { transition: none; }
}

/* ========================================================================
   9. MAÇ EKRANINDA GÖZ KALABALIĞINI AZALT (V283)
   ========================================================================

   Ölçüm (390x844): arena 699 piksel. İçinde bilgi taşımayan ya da AYNI
   şeyi iki kez söyleyen bölümler vardı:
     · "Yanlış hakkı: 3 / 3 kaldı"  -> kendi 34 piksellik satırı
     · "Tur 1 saniye içinde başlayacak"  -> 46 piksel
     · "ⓘ 3 olası ortak futbolcu bulundu" -> 52 piksel; oysa yazı alanının
       kendi ipucu zaten "Futbolcu ismini yaz · 3 olası" diyor.

   Hiçbiri KALDIRILMIYOR (tur sonucu, hata ve uyarı mesajları bu
   satırlardan geliyor); yalnız ölçüleri sakinleştiriliyor. */

html.view-mobile #root .app-shell.is-match-started .wrong-chance-row {
  min-height: 0 !important;
  margin: 0 0 6px !important;
}

html.view-mobile #root .app-shell.is-match-started .wrong-chance-pill {
  min-height: 28px !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
}

html.view-mobile #root .app-shell.is-match-started .round-feedback-stack {
  gap: 6px !important;
}

html.view-mobile #root .app-shell.is-match-started .round-feedback-stack .feedback {
  min-height: 0 !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Bilgi satırındaki büyük "ⓘ" yuvarlağı satırı iki kata çıkarıyordu. */
html.view-mobile #root .app-shell.is-match-started .feedback--meta {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-align: left !important;
}

html.view-mobile #root .app-shell.is-match-started .feedback--meta > :first-child {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

/* Takım kartlarındaki iç içe çerçeveler (altın halka + kart + iç kutu)
   küçük ekranda gürültü yapıyordu; arma ve ad kalır, kabuk incelir. */
html.view-mobile #root .app-shell.is-match-started .round-team {
  padding: 8px 6px !important;
}

html.view-mobile #root .app-shell.is-match-started .round-scoreboard {
  padding: 10px 8px !important;
}

/* Skor kartları: "Bilgisa…" diye kırpılıyordu; rakip adına yer açılır. */
html.view-mobile #root .app-shell.is-match-started .mobile-player-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.view-mobile #root .app-shell.is-match-started .mobile-player-score strong {
  flex: 0 0 auto !important;
}

/* Rakip adı "Bilgisa…" diye kırpılıyordu: kopya sütunu sabit 80 piksel
   genişlikte kalıyor, avatar ve puan ise sabit. Kart esnek satıra çevrilip
   ada kalan bütün genişlik verilir. */
html.view-mobile #root .app-shell.is-match-started .mobile-player-score {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html.view-mobile #root .app-shell.is-match-started .mobile-player-copy {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.view-mobile #root .app-shell.is-match-started .mobile-player-copy > * {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.view-mobile #root .app-shell.is-match-started .mobile-player-avatar {
  flex: 0 0 auto !important;
}

/* ========================================================================
   10. CEVAP ŞERİDİ GERÇEK CİHAZDA EKRANIN ÜSTÜNE ÇIKIYORDU (V284)
   ========================================================================

   Kullanıcı bildirimi (iPhone, gerçek klavye): klavye açılınca yazı alanı
   ve "Gönder / Pas geç" ekranın ALT kenarına değil ÜST kenarına gidiyor,
   takım kartının üstüne biniyor.

   SEBEP — `position: fixed` her zaman görüntü alanına göre konumlanmaz.
   Bir üst öğede `transform`, `filter`, `backdrop-filter`, `perspective`,
   `contain` ya da `will-change` varsa o öğe KAPSAYAN BLOK üretir ve
   `bottom` artık ekranın değil O ÖĞENİN alt kenarından ölçülür. Arena
   ~700 piksel yüksekliğinde olduğu için `bottom: <klavye yüksekliği>`
   şeridi arenanın tepesine taşıyordu. (CLAUDE.md'de aynı tuzak Penaltı
   Ligi için de yazılı: `.stage` üzerindeki `perspective` ve `contain`.)
   Chromium'un masaüstü öykünmesinde bu özellikler etkin olmadığı için
   hata orada görünmüyor; yalnız gerçek cihazda çıkıyor.

   ÇÖZÜM — şeridin bütün ataları, YALNIZ klavye açıkken, kapsayan blok
   üretmeyecek hâle getirilir. Maç sırasında bu öğeler zaten düz kap;
   görsel bir kayıp yok. */
html.view-mobile body.kk-match-active.wos-keyboard-open #root,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .app-shell,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .main-grid,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .game-card,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .round-arena,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .round-content,
html.view-mobile body.kk-match-active.wos-keyboard-open #root .round-play-grid {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  contain: none !important;
  will-change: auto !important;
}

/*
 * YEDEK KAPI — ölçüm yine de sapıyorsa şerit akışa geri döner.
 * `mobile-app-v282.js` klavye açıldıktan sonra şeridin gerçekten alt
 * yarıda olup olmadığını ÖLÇER; değilse gövdeye bu sınıfı yazar ve
 * sabitleme tamamen kapanır. Böylece en kötü durumda eski (akış içi)
 * davranışa dönülür — asla ekranın tepesinde asılı kalmaz.
 */
html.view-mobile body.kk-dock-fallback-v284.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .answer-area {
  position: static !important;
  bottom: auto !important;
  padding: 0 !important;
  background: none !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

html.view-mobile body.kk-dock-fallback-v284.kk-match-active.wos-keyboard-open #root .app-shell.is-match-started .round-content {
  padding-bottom: 16px !important;
}