/* =========================================================
   HİKÂYE + ÇOKLU OYUNCU TELEFON DÜZENİ (Mert, 29 Ekim 2026 — Galaxy S25 Ultra yatay, 51. paket)
   Sınıfları yine js/lobby_touch_layout.js koyar: yalnız canlı sitede ve dokunmatik cihazda. Sunucusuz oyunda ve masaüstünde
   hiçbiri yoktur, hiçbir şey değişmez.
   - Savaşta / maçta (kj-not-lobby) yan siyah şerit varsa (kj-fl-side, kj-fl-inset değil) oyun alanının kırpması kalkar ve
     küçük düğmeler şeride taşınır: ses ve duraklat sağ şeridin üstüne, Hata Bildir ve PIN sol şeridin üstüne,
     çoklu oyuncunun "Kalan / Güç Küpü / Mod" yazıları sol şeride, "Lobi" düğmesi sağ şeride.
     Böylece Menü / Lobi düğmesi, VUR tuşu ve küçük harita artık bir şeyin altında kalmaz.
   - Bölüm seçiminde Hikâye Çoklu Oyuncu kutusu (eşleştir / yardım / davet) sıkışık olur: bölüm listesine yer kalır.
   ========================================================= */
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #stage {
  overflow: visible !important;
  contain: none !important;
}

/* ses düğmesi: sağ şeridin ortasında, en üstte */
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #speaker {
  top: 6px !important;
  right: calc(-0.5 * var(--kj-fl-wr, 80px) - 6px - 25px) !important;
}

/* dokunmatik duraklat: sağ şeritte sesin altında */
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #btn-touch-pause {
  top: 64px !important;
  left: auto !important;
  right: calc(-0.5 * var(--kj-fl-wr, 80px) - 6px - 25px) !important;
  width: 50px !important;
  height: 50px !important;
}

/* Hata Bildir: savaşta küçük simge olarak sol şeridin en üstünde (VUR tuşunun üstüne binmez) */
html.kj-mob.kj-live-ui.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #btn-player-bug-report {
  left: 8px !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  padding: 6px 9px !important;
}
html.kj-mob.kj-live-ui.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #btn-player-bug-report span + span {
  display: none !important;
}

/* PIN: hikâye savaşında sol şeritte Hata Bildir'in altında (sol çubuğun üstüne binmez) */
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) body:not(.kj-live-aim) #brawl-pin-floating-btn {
  left: calc(0.5 * var(--kj-fl-w, 79px) + 6px - 28px) !important;
  top: 44px !important;
  right: auto !important;
  bottom: auto !important;
}

/* çoklu oyuncu: Kalan / Güç Küpü / Mod yazıları sol şeritte, Hata Bildir'in altında; küçük haritanın üstünden kalkar */
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #arena-multiplayer-hud .arena-top-left {
  left: calc(-1 * var(--kj-fl-w, 79px) - 6px) !important;
  top: 44px !important;
  width: var(--kj-fl-w, 79px) !important;
  gap: 5px !important;
}
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #arena-multiplayer-hud .arena-top-left > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  font-size: 8.5px !important;
  line-height: 1.25 !important;
  padding: 4px 5px !important;
  text-align: center !important;
  justify-content: center !important;
}

/* çoklu oyuncu: Lobi düğmesi sağ şeritte, sesin altında; ölüm akışı oyun alanının sağ üstünde tek başına kalır */
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #arena-multiplayer-hud .arena-top-right {
  right: 8px !important;
}
html.kj-mob.kj-not-lobby.kj-fl-side:not(.kj-fl-inset) #arena-multiplayer-hud #btn-arena-pause {
  position: absolute !important;
  top: 62px !important;
  right: calc(-1 * var(--kj-fl-wr, 80px) - 14px) !important;
  width: var(--kj-fl-wr, 80px) !important;
  box-sizing: border-box !important;
  padding: 5px 4px !important;
  font-size: 9px !important;
  white-space: normal !important;
  text-align: center !important;
}

/* --- Bölüm seçimi: Hikâye Çoklu Oyuncu kutusu (eşleştir / yardım ekle / arkadaş davet et) kısa ekranda tek sıra:
   düğmeler ve 3 oyuncu yeri yan yana (sığmazsa yerler alt satıra iner); 40 px parmak payı aynı kalır --- */
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 3px 4px !important;
}
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:first-child {
  display: contents !important;
}
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:first-child > div:first-child {
  flex: 0 0 100% !important;
}
/* uzun açıklama satırı telefonda gizli (başlık ve düğmeler yeter) */
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:first-child > div:first-child > div + div {
  display: none !important;
}
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:first-child > div:last-child {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:last-child {
  flex: 1 1 180px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  margin-bottom: 0 !important;
}
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:last-child > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
html.kj-mob-short #chapter-list > li.kj-coop-panel:first-child > div > div:last-child > div > * {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}