/*
 * kariyer-koprusu/mobile-v219.css — Futbolcu Köprüsü mobil düzeni.
 *
 * ÖLÇÜLEN SORUNLAR (390x844, gerçek tarayıcı):
 *   · Oyuna başlamadan önce 2647 piksel sayfa vardı; oynanışa ulaşmak için
 *     üç ekran kaydırmak gerekiyordu.
 *   · Oyun türü kartları 390 piksellik ekranda yan yana 171x327 olarak
 *     sıkışıyordu.
 *   · Yapışkan aksiyon şeridi `bottom:4px` ile duruyordu: iPhone home
 *     göstergesi ve Android gezinme çubuğu şeridin üstüne biniyordu.
 *   · Yan kartlar kabından 12 piksel geniş çıkıyordu.
 *
 * Görsel kimlik, renk, rozetler, arka plan: DEĞİŞTİRİLMEDİ.
 */

/* =========================================================================
 * KISALTMALARIN İKİ KEZ YAZILMASI (FBFB, RMARMA, LL, MM)
 * =========================================================================
 *
 * `assets/v65-ui/kariyer-koprusu.js` her rozete iki şey yapıyor:
 *   1) rozetteki <b> etiketinin metnini kanonik koda çeviriyor (doğru iş),
 *   2) rozete ayrıca `.v65-club-code` adlı ikinci bir katman ekliyor.
 *
 * O ikinci katman YALNIZCA maç sırasındaki büyük rozetler için
 * biçimlendirilmiş (`.is-match-started .round-team .club-badge--lg` altında
 * mutlak konumlu bir kaplama). Başka her yerde hiçbir kuralla eşleşmiyor,
 * dolayısıyla sıradan satır içi metin olarak <b>'nin hemen yanında
 * görünüyor ve kısaltma iki kez yazılmış gibi okunuyor: "FBFB", "RMARMA".
 * Harfli modda aynı sebeple "LL", "MM" çıkıyor.
 *
 * Katman varsayılan olarak gizlenir; biçimlendirildiği tek bağlamda geri
 * açılır. Bu bir mobil sorunu değil, masaüstünde de görünüyordu — o yüzden
 * kural bilerek mobil sorgusunun DIŞINDA.
 */
.club-badge .v65-club-code {
  display: none !important;
}

.app-shell.is-match-started .round-team .club-badge--lg .v65-club-code {
  display: grid !important;
}

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

  /* ===================== 1) Oyuna daha çabuk ulaşmak ====================== */

  /*
   * Tanıtım bölümü mobilde kısalır — SİLİNMEZ. Başlık ve ölçüler kalır,
   * yalnız dev tipografi telefona uygun ölçüye iner.
   */
  html body #root .hero {
    padding: 14px !important;
  }

  /*
   * Başlık üç satıra çıktığında son satır alttaki paragrafın üstüne
   * biniyordu: masaüstü düzeni başlığa sabit yükseklik veriyor, mobilde
   * satır sayısı artınca taşıyor. Yükseklik içeriğe bırakıldı.
   */
  html body #root .hero h1 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 10px !important;
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.14 !important;
  }

  /*
   * Üst gezinti şeridi 390 piksele sığmayıp sağdan taşıyordu (ayar düğmesi
   * kesiliyordu). Şerit kendi içinde yatay kayar; düğme sayısı ve sırası
   * değişmez.
   */
  html body #root .topnav {
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body #root .topnav::-webkit-scrollbar { display: none !important; }

  html body #root .topnav > * {
    flex: 0 0 auto !important;
  }

  html body #root .hero p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 13px !important;
  }

  /* Oyun türü kartları: dar ekranda alt alta, okunur yükseklikte. */
  html body #root .game-type-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body #root .game-type-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
  }

  /* ===================== 2) Aksiyon şeridi (alt kontrol) ================== */

  /*
   * Şerit kaldırılmadı: içindeki üç düğme oyunun GERÇEK aksiyonları.
   * Düzgün yapıldı — güvenli alanla uyumlu, tek satır, 48 piksel hedef.
   */
  html body #root .game-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    bottom: calc(max(var(--wos-safe-bottom), 6px)) !important;
    padding: 8px !important;
  }

  html body #root .game-actions .btn {
    min-height: 48px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  /* Ana aksiyon iki sütunu birden kaplar: en büyük ve en belirgin düğme. */
  html body #root .game-actions .btn--primary,
  html body #root .game-actions .btn--large {
    grid-column: 1 / -1 !important;
    min-height: 52px !important;
    font-size: 14.5px !important;
  }

  /*
   * Çok dar telefonlarda (<=360px) şerit üç satıra çıkıp 126 piksele
   * ulaşıyordu; sayfa sonuna gelindiğinde üst kenarı ekranın dışına
   * taşıyordu. Bu genişlikte düğmeler tek sütuna ve daha kısa yüksekliğe
   * iner — hepsi görünür kalır.
   */
  @media (max-width: 360px) {
    html body #root .game-actions {
      grid-template-columns: 1fr !important;
      gap: 6px !important;
      padding: 6px !important;
    }
    html body #root .game-actions .btn {
      min-height: 44px !important;
      font-size: 12px !important;
    }
    html body #root .game-actions .btn--primary,
    html body #root .game-actions .btn--large {
      min-height: 46px !important;
      font-size: 13px !important;
    }
  }

  /* Şeridin altında kalan içerik olmasın. */
  html body #root .main-grid {
    padding-bottom: calc(max(var(--wos-safe-bottom), 8px) + 12px) !important;
  }

  /*
   * Bu oyunda alt kenarda yapışkan bir aksiyon şeridi var. Ortak menü
   * düğmesinin varsayılan yeri (sağ alt köşe) o şeridin "Oyunu başlat"
   * düğmesinin üstüne biniyordu. Menü düğmesi şeridin üstüne alınır —
   * ikisi de tek elle erişilebilir kalır, hiçbiri diğerini kapatmaz.
   */
  html body .wos-menu-btn {
    bottom: calc(max(var(--wos-safe-bottom), 0px) + 136px) !important;
  }

  @media (max-width: 360px) {
    html body .wos-menu-btn {
      bottom: calc(max(var(--wos-safe-bottom), 0px) + 166px) !important;
    }
  }

  /* ===================== 2a) Mod başlığı şeridi =========================== */

  /*
   * Oyunun adı ve o anki modu, oyun kartının en üstünde net biçimde yazar;
   * modu değiştiren düğme tam yanındadır. Bu şerit, kaldırılan yüzen menünün
   * işe yarayan iki satırının yerini alır — ikisi de artık tek dokunuşla
   * erişilebilir ve nerede oldukları belli.
   */
  .kk-mode-bar-v219 {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid rgba(18, 125, 78, .22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(18, 125, 78, .12), rgba(18, 125, 78, .04));
  }

  .kk-mode-bar-v219 .kk-mode-bar-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .kk-mode-bar-v219 .kk-mode-game {
    color: rgba(18, 125, 78, .9);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .kk-mode-bar-v219 .kk-mode-name {
    font-size: 19px;
    font-weight: 900;
    line-height: 1.12;
  }

  .kk-mode-bar-v219 .kk-mode-hint {
    overflow: hidden;
    opacity: .72;
    font-size: 11.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
  }

  .kk-mode-bar-v219 .kk-mode-change {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(18, 125, 78, .34);
    border-radius: 13px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
  }

  /* Maç başlayınca şerit sahneden yer çalmaz. */
  html body.kk-match-active .kk-mode-bar-v219 { display: none; }

  /* ===================== 2b) Ayar seçenekleri 2x2 ======================== */

  /*
   * Tur süresi (15/30/45/1 dk) ve kazanma puanı dört seçenek. Tek satıra
   * sığmadığı için dördüncüsü alt satıra tek başına düşüyor ve solda yetim
   * kalıyordu. İkişerli iki satır: hem dengeli hem de her düğme 44 piksel
   * dokunma hedefinde.
   */
  html body #root .match-settings__group .setting-tabs,
  html body #root .solo-settings .difficulty-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body #root .match-settings__group .setting-tabs button,
  html body #root .solo-settings .difficulty-tabs button {
    min-height: 46px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }

  /* Ayar başlığı ve altındaki açıklama okunur boyutta. */
  html body #root .match-settings__group > div > span {
    font-size: 11px !important;
    letter-spacing: .08em !important;
  }

  html body #root .match-settings__group > div > b {
    display: block !important;
    margin: 2px 0 8px !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
  }

  /* ===================== 2c) Geçmiş listeleri okunur ===================== */

  /*
   * "Son turlar", "Tur geçmişi" ve "Bu maçtaki son denemeler" listeleri çok
   * küçük ve sıkışıktı; süre bilgisi satırın ucuna yapışıyordu. Satırlar
   * nefes alır, süre kendi hizasında durur.
   */
  html body #root .history-list > * {
    min-height: 44px !important;
    padding: 9px 11px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html body #root .history-list b,
  html body #root .history-list strong {
    font-size: 13.5px !important;
  }

  html body #root .history-list small,
  html body #root .history-list .history-time,
  html body #root .history-list time {
    display: inline-block !important;
    margin-left: 6px !important;
    opacity: .78 !important;
    font-size: 11.5px !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  html body #root .side-card__title {
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  /* ===================== 3) Yan kartlar kabına sığar ====================== */

  html body #root .side-stack,
  html body #root .side-card,
  html body #root .history-card,
  html body #root .attempts-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #root .history-list {
    max-height: 240px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* ===================== 4) İki taraf ve futbolcu kartları ================ */

  /* Takım kartları dar ekranda alt alta: logo ve isim kesilmesin. */
  @media (max-width: 430px) {
    html body #root .players-grid {
      grid-template-columns: 1fr !important;
    }
  }

  html body #root .player-card {
    min-width: 0 !important;
  }

  /* Uzun takım ve futbolcu adları taşmaz, sarar. */
  html body #root .player-card b,
  html body #root .player-card strong,
  html body #root .club-summary,
  html body #root .player-suggestions button {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  /* ===================== 5) KLAVYE AÇIK — arama ve öneriler ============== */

  /*
   * Arama alanı kendi açılır listesini taşır. Ortak zeminin sayfa kilidi bu
   * alanda İSTENMEZ: sayfa `position:fixed` yapıldığında liste alanından
   * kopup ekranı kaplayan bir katmana dönüşüyordu. `data-wos-no-page-lock`
   * bunu kapatır; işaretlemeyi aşağıdaki kural yerine JS değil, HTML yapısı
   * üzerinden veremediğimiz için arama kabının kendisi hedeflenir.
   */
  html body.wos-keyboard-open #root .club-search .search-menu,
  html body.wos-keyboard-open #root .player-suggestions {
    /* Liste ekranı kaplamaz; kendi içinde kayar. */
    max-height: min(46vh, calc(var(--wos-visible-height, 100dvh) * 0.46)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Öneri satırları rahat dokunulur yükseklikte. */
  html body #root .club-search .search-menu button,
  html body #root .player-suggestions button {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    text-align: left !important;
  }

  /* iOS otomatik yakınlaştırma eşiği. */
  html body #root .club-search input,
  html body #root .answer-area input,
  html body #root input[type="text"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /*
   * Maç sürerken klavye açıldığında İKİ TARAF ve harfli moddaki harfler
   * görünür kalır: skor tablosu üstte sabitlenir, alt tarafı input ve
   * öneri listesi alır.
   */
  html body.kk-match-active.wos-keyboard-open #root .round-scoreboard,
  html body.kk-match-active.wos-keyboard-open #root .opponent-strip {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
  }

  html body.kk-match-active.wos-keyboard-open #root .hero,
  html body.kk-match-active.wos-keyboard-open #root .side-stack,
  html body.kk-match-active.wos-keyboard-open #root .data-guide,
  html body.kk-match-active.wos-keyboard-open #root .kk-mobile-visual-card {
    display: none !important;
  }

  /* ===================== 6) Üst çubuk ve güvenli alan ==================== */

  html body #root .topbar {
    padding-top: calc(max(var(--wos-safe-top), 0px) + 8px) !important;
  }

  html body #root .topnav button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* =========================================================================
 * V229 — ÜST ÇUBUK: OYUN ADI VE DİL SEÇİMİ (yalnız mobil)
 * =========================================================================
 *
 * ÖLÇÜLEN DURUM (390x844, gerçek tarayıcı):
 *   · `mobile-app-v154.css` üst çubuktaki marka bloğunu tamamen gizliyordu
 *     (`#root .topbar .brand{display:none}`). Sonuç: çubuğun sağındaki
 *     alan bomboş yeşil bir şerit olarak kalıyor, oyunun adı mobilde
 *     hiçbir yerde yazmıyordu.
 *   · Aynı dosya gezinti düğmelerini 38 piksellik ikon kutularına indirip
 *     `font-size:0` veriyordu; "Oyun türü" düğmesi yalnız bir ok, "Bilgi"
 *     ve "Ayarlar" boş kutular olarak görünüyordu.
 *   · Dil seçici (#kkLangSwitch) `position:fixed` ve konumu her karede JS
 *     ile hesaplanıyordu. Çubuk dar olduğunda hesap "8 piksel sola, navın
 *     altına" dalına düşüyor; seçici çubuğun dışına, sayfanın üstüne
 *     düşüyor ya da hiç görünmüyordu.
 *
 * YENİ DÜZEN — çubuk mobilde İKİ SATIR:
 *   1. satır: oyunun adı (Ana Menü düğmesinin sağında)
 *   2. satır: oyun türü · dil · bilgi · ayarlar
 *
 * Oyun mantığı, veri ve masaüstü düzeni: DEĞİŞTİRİLMEDİ. Bu blok yalnız
 * mobil kırılımda yürürlüktedir.
 */
@media (max-width: 900px), (pointer: coarse) {

  html body #root .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-right: max(var(--wos-safe-right), 12px) !important;
    padding-bottom: 10px !important;
    padding-left: max(var(--wos-safe-left), 12px) !important;
    /*
     * `mobile-app-v154.css` çubuğa SABİT 58 piksel yükseklik veriyor
     * (`height:58px!important`). Tek satırlık düzende bu yetiyordu; iki
     * satırda gezinti şeridine sıfır piksel kalıyor ve düğmeler çubuğun
     * dışına taşıyordu. Yükseklik içeriğe bırakılır.
     */
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  /* --- 1. satır: oyun adı --------------------------------------------- */

  /*
   * Marka bloğu geri açılır. "Ana Menü" düğmesi gövdeye sabitlenmiş
   * (position:fixed) olduğu için akışta yer kaplamaz; adın onun altına
   * girmemesi için sol boşluk düğmenin genişliği kadar bırakılır.
   */
  html body #root .topbar .brand,
  html body #root .topbar .brand.brand-v213 {
    /*
     * Taban stil markayı çubuğun ORTASINA mutlak konumluyor
     * (`position:absolute; left:50%; transform:translateX(-50%)`). Mutlak
     * konumda kaldığı sürece satır yüksekliğine katkı vermez ve gezinti
     * düğmelerinin altına girer; akışa geri alınır.
     */
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 9px !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 36px !important;
    margin-left: 104px !important;
    text-align: left !important;
  }

  html body #root .topbar .brand img {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
  }

  html body #root .topbar .brand > div {
    min-width: 0 !important;
  }

  html body #root .topbar .brand strong {
    display: block !important;
    overflow: hidden !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* Alt satır ("FUTBOLCU BİLGİ AĞI") telefonda ada yer bırakmıyor. */
  html body #root .topbar .brand > div > span {
    display: none !important;
  }

  /* 360 pikselin altında ad kısalır ama SİLİNMEZ. */
  @media (max-width: 360px) {
    html body #root .topbar .brand,
    html body #root .topbar .brand.brand-v213 {
      margin-left: 96px !important;
    }
    html body #root .topbar .brand img {
      display: none !important;
    }
    html body #root .topbar .brand strong {
      font-size: 14.5px !important;
    }
  }

  /* --- 2. satır: gezinti + dil ----------------------------------------- */

  html body #root .topbar .topnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /*
   * Dil seçici artık akışın içinde. `position:fixed` ve JS'in yazdığı
   * satır içi `left`/`top` değerleri burada geçersiz kılınır; seçici
   * kendi satırındaki yerinde durur, kaydırmayla oynamaz.
   */
  html body #root .topbar .topnav #kkLangSwitch {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    gap: 4px !important;
    max-width: none !important;
    margin: 0 auto 0 0 !important;
    padding: 3px 4px !important;
  }

  html body #root .topbar .topnav #kkLangSwitch button {
    display: inline-flex !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  html body #root .topbar .topnav #kkLangSwitch .flag,
  html body #root .topbar .topnav #kkLangSwitch .flag svg {
    display: block !important;
    width: 24px !important;
    height: 17px !important;
  }

  html body #root .topbar .topnav #kkLangSwitch button span:last-child {
    display: none !important;
  }

  /* "Oyun türü" düğmesinin yazısı geri gelir: ikon tek başına anlaşılmıyor. */
  html body #root .topbar .topnav .topnav__game {
    order: 1 !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 128px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body #root .topbar .topnav .topnav__game span {
    display: inline !important;
  }

  html body #root .topbar .topnav .topnav__info {
    order: 4 !important;
  }

  html body #root .topbar .topnav .topnav__primary {
    order: 5 !important;
  }

  html body #root .topbar .topnav .topnav__info,
  html body #root .topbar .topnav .topnav__primary {
    flex: 0 0 auto !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  /* =======================================================================
   * V229 — AKSİYON ŞERİDİ ARTIK SAYFAYLA GEZMİYOR
   * =======================================================================
   *
   * `assets/kariyer-mobile-v110.css` şeride `position:sticky; bottom:4px`
   * veriyordu. Şerit bu yüzden sayfa boyunca ekranın altına yapışık
   * geziyor, kaydırırken içeriğin üstünü kapatıyordu.
   *
   * Şerit kaldırılmadı, YERİNE oturtuldu: kurulum kartının sonunda, kendi
   * akış konumunda durur. Sayfayı kaydırınca içerikle birlikte yukarı
   * çıkar. Düğmeler, ölçüler ve dokunma hedefleri aynı kaldı.
   */
  html body #root .game-actions {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: 0 8px 22px rgba(12, 48, 31, .12) !important;
  }

  /* Şerit yapışkan değilken alt boşluğu ayırmanın anlamı kalmadı. */
  html body #root .main-grid {
    padding-bottom: 12px !important;
  }
}

/*
 * Şerit artık yapışkan olmadığı için ortak menü düğmesini 136 piksel
 * yukarı itmenin sebebi kalmadı; düğme varsayılan köşesine döner.
 */
@media (max-width: 900px), (pointer: coarse) {
  html body .wos-menu-btn {
    bottom: calc(max(var(--wos-safe-bottom), 0px) + 12px) !important;
  }
}

/* V230'da kaldırılan dil şeridi önbellekten gelen bir sürümde hâlâ
 * üretilirse ekranda görünmesin. */
#root .kk-lang-strip {
  display: none !important;
}

/* =========================================================================
 * V230 — ÜST ÇUBUK SADELEŞTİ (yalnız mobil)
 * =========================================================================
 *
 * V229'da çubuk iki satıra ayrılmıştı ama ikinci satır hâlâ dört düğme
 * taşıyordu: oyun türü · dil · bilgi · ayarlar. Gerçek iPhone'da ölçülen
 * sonuç: "Oyun türü" yazısı kendi kutusundan taşıyor, bilgi ve ayarlar iki
 * anlamsız ikona iniyordu.
 *
 * Üçü de ÇUBUKTAN kaldırıldı, çünkü üçünün de sayfada zaten bir karşılığı
 * var — kaldırılan hiçbir işlev kaybolmuyor:
 *   · Oyun türü  -> oyun kartındaki "Oyun türü seç" düğmesi (mod şeridi)
 *   · Bilgi      -> kahraman bölümündeki "Nasıl oynanır" düğmesi
 *                   (mobile-v219.js o düğmeyi uzun rehbere bağlıyor)
 *   · Ayarlar    -> yalnızca bir ÖZET penceresi açıyordu; içindeki her
 *                   satır (tur süresi, kazanma puanı, zorluk, milli takım
 *                   verisi) kurulum kartında zaten görünür ve seçilebilir.
 * Düğmeler DOM'da duruyor, yalnız görünmüyor: yukarıdaki iki bağlantı
 * onlara `click()` ile bastığı için çalışmaya devam ediyor.
 *
 * Kalan düzen:
 *   1. satır  · oyunun adı
 *   2. satır  · dil seçimi — bayrak VE yazı ("Türkçe" / "English"),
 *               adın tam altında ortalanmış
 *   "Ana Menü" düğmesi solda, yeşil çubuğun tamamına göre DİKEY ORTALI.
 *
 * Çubuk yüksekliği tek bir değişkenden okunuyor (`--kk-bar-h`); "Ana Menü"
 * düğmesinin dikey ortalaması da aynı değişkenden türetiliyor, böylece
 * ikisi bir daha ayrışamaz.
 */
@media (max-width: 900px), (pointer: coarse) {

  html body {
    --kk-bar-h: calc(max(var(--wos-safe-top), 0px) + 104px);
    --kk-bar-top: 8px;
    --kk-home-w: 100px;
    --kk-home-h: 38px;
  }

  html body #root .topbar {
    height: var(--kk-bar-h) !important;
    min-height: var(--kk-bar-h) !important;
    gap: 6px !important;
  }

  /* "Ana Menü": solda, yeşil çubuğun tam dikey ortasında. */
  html body .portal-home-button {
    top: calc(var(--kk-bar-top) + (var(--kk-bar-h) - var(--kk-home-h)) / 2) !important;
    left: 14px !important;
    height: var(--kk-home-h) !important;
    padding: 0 11px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  /*
   * 1. satır — oyunun adı.
   *
   * Ad ve dil satırı AYNI bölgede ortalanır: "Ana Menü"nün sağında kalan
   * alan. İki satırın da tek bir sol boşluktan (`--kk-home-w`) türemesi
   * şart — biri sağdan, biri soldan hizalanırsa dil satırı adın altında
   * değil, yanında durur.
   */
  html body #root .topbar .brand,
  html body #root .topbar .brand.brand-v213 {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    overflow: hidden !important;
    justify-content: center !important;
    margin-left: var(--kk-home-w) !important;
    padding-right: 0 !important;
    min-height: 34px !important;
  }

  html body #root .topbar .brand > div {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  /* 2. satır — yalnız dil seçimi, adın tam altında ortalı. */
  html body #root .topbar .topnav {
    justify-content: center !important;
    padding-left: var(--kk-home-w) !important;
    padding-right: 0 !important;
  }

  html body #root .topbar .topnav .topnav__game,
  html body #root .topbar .topnav .topnav__info,
  html body #root .topbar .topnav .topnav__primary {
    display: none !important;
  }

  html body #root .topbar .topnav #kkLangSwitch {
    order: 0 !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 3px !important;
  }

  /* Bayrağın yanında dilin ADI da yazar: "Türkçe" / "English". */
  html body #root .topbar .topnav #kkLangSwitch button {
    flex: 0 1 auto !important;
    gap: 6px !important;
    overflow: hidden !important;
    width: auto !important;
    min-width: 0 !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body #root .topbar .topnav #kkLangSwitch button span:last-child {
    display: inline !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #root .topbar .topnav #kkLangSwitch .flag,
  html body #root .topbar .topnav #kkLangSwitch .flag svg {
    width: 22px !important;
    height: 15px !important;
    flex: 0 0 22px !important;
  }

  /* Dar telefonda ad ve dil satırı için biraz daha yer açılır. */
  @media (max-width: 380px) {
    html body {
      --kk-home-w: 92px;
    }
    html body .portal-home-button {
      left: 10px !important;
      padding: 0 9px !important;
      font-size: 10px !important;
    }
    html body #root .topbar .topnav #kkLangSwitch button {
      padding: 0 8px !important;
      font-size: 11px !important;
    }
    html body #root .topbar .topnav #kkLangSwitch .flag,
    html body #root .topbar .topnav #kkLangSwitch .flag svg {
      width: 19px !important;
      height: 13px !important;
      flex: 0 0 19px !important;
    }
    /*
     * Dar ekranda ada kalan bölge 186 piksele iniyor; "FUTBOLCU KÖPRÜSÜ"
     * 16 puntoda 220 piksel. Rozet düşer, punto küçülür — ad KESİLMEZ.
     */
    html body #root .topbar .brand img {
      display: none !important;
    }
    html body #root .topbar .brand strong {
      font-size: 14px !important;
    }
  }

  @media (max-width: 340px) {
    html body #root .topbar .brand strong {
      font-size: 12.5px !important;
    }
  }
}

/* =========================================================================
 * V230 — KAHRAMAN BAŞLIĞININ ÜÇÜNCÜ SATIRI OKUNMUYORDU
 * =========================================================================
 *
 * "Takımları seç. / Ortak futbolcuyu / herkesten önce bul." başlığının son
 * satırı `<em>` ile vurgulanıyor ve rengi #1f7a50 (koyu yeşil). Altındaki
 * fotoğraf ise aydınlık bir stadyum; üzerindeki karartma yalnız %28.
 *
 * ÖLÇÜLEN KONTRAST (390x844, gerçek piksel örneklemesi)
 *     zemin  ~ (150,153,156)   koyu yeşil yazı ~ (31,122,80)
 *     oran   ~ 1.6:1           — WCAG'in büyük yazı için istediği 3:1'in
 *                                yarısı; kullanıcının ekran görüntüsünde de
 *                                satır fotoğrafın içinde kayboluyor.
 *
 * İki değişiklik birlikte gerekiyordu; tek başına hiçbiri yetmiyor:
 *   · karartma koyulaştırıldı — aydınlık gökyüzü yazının altından çekildi,
 *   · vurgu rengi açık yeşile alındı — koyu yeşil, koyulaşan zeminde de
 *     okunmuyordu (koyu üstüne koyu).
 *
 * Yalnız mobil. Masaüstünde başlık daha büyük bir alanda ve farklı bir
 * kadrajda duruyor; orada sorun ölçülmedi, dokunulmadı.
 */
@media (max-width: 900px), (pointer: coarse) {

  /*
   * Karartma FOTOĞRAFA DOKUNMADAN eklenir. `background-image`i yeniden
   * yazmak fotoğrafın adresini de yeniden yazmak demekti; adres tek yerde
   * (oyunun kendi CSS'inde) dursun diye karartma ayrı bir kaplama katmanı
   * olarak konur.
   */
  html body #root .hero {
    position: relative !important;
    isolation: isolate !important;
  }

  html body #root .hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(rgba(6, 25, 28, .48), rgba(6, 25, 28, .36)) !important;
    pointer-events: none !important;
  }

  /* İçerik kaplamanın üstünde kalır. */
  html body #root .hero > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body #root .hero h1,
  html body #root .hero p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55) !important;
  }

  html body #root .hero h1 em {
    color: #6fe3a6 !important;
  }
}