/*
 * son-harf/topbar-v230.css — Üst şeridin masaüstü düzeni.
 *
 * ÖLÇÜLEN DURUM (1440x900, gerçek tarayıcı)
 *     .sh-brand         625 → 815 piksel   (ortada, mutlak konumlu)
 *     .sh-nav-actions   609 → 831 piksel   (aynı yerde!)
 *   İki blok birebir üst üste biniyordu: "Nasıl Oynanır" ve "Ayarlar"
 *   düğmeleri "SON HARF" yazısının üstüne çıkıyordu.
 *
 * BULUNAN SEBEP
 *   Şerit üç sütunlu bir ızgara: `grid-template-columns: 1fr auto 1fr`.
 *   Marka V201'de `position:absolute` yapıldı — mutlak konumlu bir öğe
 *   ızgara YERLEŞİMİNDEN çıkar. Böylece geriye iki ızgara öğesi kalıyor
 *   ("Ana Menü" ve eylemler) ve eylemler ikinci sütuna, yani tam ortaya
 *   düşüyor. `justify-self:end` yalnız o sütunun içinde sağa yaslıyor,
 *   sütunun kendisi ortada olduğu için sorun görünmüyordu.
 *
 * YENİ DÜZEN
 *     [Ana Menü]   ·   [🔗 SON HARF, tam orta]   ·   [Nasıl Oynanır] [dil]
 *   Eylemler açıkça ÜÇÜNCÜ sütuna sabitlendi. "Ayarlar" düğmesi şeritten
 *   kaldırıldı: içindeki her ayar (PC sayısı, kelime hakkı, tur süresi,
 *   zorluk) kurulum kartında zaten görünür ve seçilebilir durumda.
 *   Düğme DOM'da duruyor — mobil menüdeki "Ayarlar" satırı ona `click()`
 *   ile bastığı için o yol çalışmaya devam ediyor.
 *
 * Dil düğmesi de şeridin sağına, "Nasıl Oynanır"ın yanına alındı; eskiden
 * "Ana Menü"nün sağına mutlak konumla çivileniyordu.
 *
 * KAPSAM — YALNIZ MASAÜSTÜ (901 piksel ve üstü).
 *   Mobil şerit zaten iki satırlı ve düzgün çalışıyordu; buradaki kurallar
 *   oraya sızarsa "Nasıl Oynanır" düğmesi genişleyip dil düğmesini ekranın
 *   dışına itiyor (ölçüldü: dil düğmesi 390 piksellik ekranda 292–463
 *   arasına düşüyordu). Bu yüzden dosyanın tamamı tek bir masaüstü
 *   sorgusunun içinde.
 */

@media (min-width: 901px) {

  /* --- "Ana Menü": diğer oyunlardaki ev düğmesinin aynısı --- */
  .sh-nav .sh-back.sh-back--home-v230 {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #182536, #0d1623) !important;
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
  }

  .sh-nav .sh-back.sh-back--home-v230:hover {
    background: linear-gradient(180deg, #26374d, #121d2b) !important;
    transform: translateY(-1px);
  }

  .sh-nav .sh-back.sh-back--home-v230 svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  .sh-nav .sh-back.sh-back--home-v230 b {
    font-weight: 900 !important;
  }

  /* --- eylemler: her zaman üçüncü sütun, sağa yaslı --- */
  .sh-nav .sh-nav-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* "Ayarlar" şeritten kalktı; ayarların tamamı kurulum kartında. */
  .sh-nav .sh-nav-actions #shSettingsButton {
    display: none !important;
  }

  /* "Nasıl Oynanır" okunur bir düğme; daire ikon kalıbından çıkarıldı. */
  .sh-nav .sh-nav-actions #shInfoButton {
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /*
   * Dil düğmesi `word-game-language.js` tarafından `.sh-nav`in doğrudan
   * çocuğu olarak ekleniyor ve satır içi `left` ile konumlanıyor.
   * `topbar-v230.js` onu eylemler kutusuna taşır; buradaki kural da mutlak
   * konumu ve satır içi `left` değerini geçersiz kılar.
   */
  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch,
  .son-harf-page .sh-nav > .word-language-switch {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  /*
   * Şeridin taban stili eylem kutusundaki HER düğmeyi 38 pikselik bir
   * daireye sokuyor (`.sh-nav-actions button{width:38px;border-radius:50%}`).
   * Dil düğmesi de bir <button> olduğu için taşındığı anda daireye giriyor
   * ve "Türkçe · Değiştir" yazısı kırpılıyordu. Bu iki düğme daire
   * kalıbından çıkarılır.
   */
  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch {
    /*
     * `display:grid` + `place-items:center` de o taban kuralın parçası:
     * bayrak, "Türkçe" ve "Değiştir" TEK hücreye yığılıp üst üste biniyor,
     * kutu da 93 piksele düşüyordu. Satır düzenine geri alınır.
     */
    display: inline-flex !important;
    gap: 7px !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: max-content !important;
    padding: 8px 13px !important;
    border: 1px solid #cfdce9 !important;
    border-radius: 12px !important;
    /*
     * Zemin açıkça yazılır. Eylem kutusundaki düğmeler oyunun ikon
     * kalıbından geldiği için zemin bağlama göre değişiyor; dil düğmesi
     * lacivert şeridin üstünde kalınca "Değiştir" etiketi 1.79:1 kontrasta
     * düşüyordu (ölçüldü). Beyaz zemin + koyu yazı ile 7:1'in üstüne çıkar.
     */
    background: #fff !important;
    color: #243a59 !important;
  }

  /*
   * `assets/v60-ui/son-harf.css` eylem düğmelerini ikon kalıbına sokmak için
   * `.sh-nav-actions button { font-size: 0 !important }` yazıyor ve yazıyı
   * `::before` ile bir SVG'ye çeviriyor. Dil düğmesinin yazısı ("Türkçe ·
   * Değiştir") bu yüzden sıfır genişlikte kalıyordu — kutu 164 yerine 93
   * piksel ölçülüyordu. Punto bu düğme için geri verilir.
   */
  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch,
  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch span {
    font-size: 12.5px !important;
  }

  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch::before {
    content: none !important;
  }

  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch .word-language-switch-flag {
    width: 26px !important;
    height: 18px !important;
    flex: 0 0 26px !important;
  }

  .son-harf-page .sh-nav .sh-nav-actions .word-language-switch .word-language-switch-action {
    display: inline !important;
    color: #4a5c73 !important;
    font-weight: 750 !important;
  }

  /* Marka ortada kalır; iki yanın toplam genişliği kadar pay bırakılır. */
  .sh-nav .sh-brand {
    max-width: calc(100% - 480px) !important;
  }

  /*
   * Oda ayarlarının ne zaman değiştirilebileceğini söyleyen tek satırlık not
   * (`room-settings-v230.js` üretir). Kilitli açılır listeler soluk görünür.
   */
  .sh-room-settings-hint-v230 {
    margin: 8px 0 0 !important;
    color: #5c7086;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .sh-room-settings-hint-v230[hidden] {
    display: none !important;
  }

  .sh-online-grid select:disabled,
  .sh-online-grid input:disabled {
    opacity: .62;
    cursor: not-allowed;
  }
}