/*
 * penalty-ui-v210.css — Penaltı Ligi arayüz düzeni ve okunabilirlik.
 *
 * NEDEN:
 *   Menüler ve hafta sonu ekranı geniş ekranlarda ortada dar bir sütunda
 *   kalıyordu: 1920 piksellik ekranda 640-760 piksellik bir kutu, yanları boş.
 *   Puan durumu 7.7 piksel yazıyla çiziliyor, okunmuyordu. Bu katman yalnız
 *   YERLEŞİM ve OKUNABİLİRLİK düzeltir; oynanışa, motora ve lig mantığına
 *   dokunmaz.
 *
 *   Kurallar geniş ekranlara koşullanmıştır; telefon/tablet düzeni olduğu gibi
 *   kalır.
 */

/* ===================================================================== *
 * 1) PENCERELER EKRANI KULLANSIN
 * ===================================================================== */

@media (min-width: 1024px) {
  /* Mod seçimi: dil + iki mod kartı yan yana rahat sığsın. */
  #modeOverlay .modal,
  #modeOverlay .modeModal {
    width: min(1180px, 94%) !important;
    max-width: 1180px !important;
  }

  /* Takım seçimi ve oda ekranı: liste ile ayarlar yan yana. */
  #startOverlay .modal { width: min(1640px, 97%) !important; max-width: 1640px !important; }
  #multiOverlay .modal { width: min(1560px, 96%) !important; max-width: 1560px !important; }

  /* Hafta sonu: sonuç listesi ve puan durumu yan yana. */
  #endOverlay .modal { width: min(1520px, 96%) !important; max-width: 1520px !important; }
}

/* ===================================================================== *
 * 2) HAFTA SONU: SONUÇLAR SOLDA, PUAN DURUMU SAĞDA
 * ===================================================================== */

@media (min-width: 1100px) {
  #weekReview {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 16px 22px;
    align-items: start;
    text-align: left;
    /*
     * Taban kural bu kutuyu 360 piksele kırpıyordu (tek sütunluk dar düzen
     * için ölçülmüş). İki sütuna geçince puan durumu 9. sırada kesiliyor,
     * pencerenin altında ise boş yer kalıyordu. Geniş ekranda sınır sahneye
     * göre açılır; kırpma iç panellerin kendi kaydırmasına bırakılır.
     */
    max-height: none !important;
    overflow: visible !important;
  }
  #weekReview .weekReviewTitle { grid-column: 1 / -1; margin-bottom: 2px; }

  #weekReview .weekResults,
  #weekReview .weekTable {
    margin: 0 !important;
    max-height: min(64vh, 560px);
    overflow: auto;
    border-radius: 16px;
    background: rgba(4, 18, 30, .42);
    border: 1px solid rgba(255, 255, 255, .10);
    padding: 10px 12px;
  }

  /* Sonuç satırları: takım adları kenarlara, skor ortada ve okunur. */
  #weekReview .weekResults > *   { font-size: 13px !important; line-height: 1.45; }
  #weekReview .weekTable        { font-size: 12px !important; }
  #weekReview .weekTable b,
  #weekReview .weekTable strong { color: #eafaff; }

  /*
   * Puan durumu tablosu dar ekran için ölçülmüş sabit sütunlarla (22px/24px)
   * çiziliyor. Geniş sütunda sayılar 10.5 piksellik iğne uçlarına dönüşüyor,
   * takım adı ile rakamlar arasında kocaman bir boşluk kalıyordu. Geniş
   * ekranda sütunlar da büyür.
   */
  #weekReview .weekTable .tableHeader,
  #weekReview .weekTable .tableRow {
    grid-template-columns: 30px 26px minmax(120px, 1fr)
                           34px 34px 34px 34px 40px 40px 44px 40px !important;
    padding: 7px 10px !important;
    gap: 2px;
  }
  #weekReview .weekTable .tableHeader { font-size: 11px !important; color: #9fd8ea !important; }
  #weekReview .weekTable .tableRow    { font-size: 12.5px !important; }
  #weekReview .weekTable .club        { font-size: 13px !important; color: #ffffff !important; }
  /* Puan sütunu tablonun okunan sütunudur. */
  #weekReview .weekTable .tableRow > :last-child {
    font-weight: 1000 !important;
    font-size: 13.5px !important;
    color: #ffd88a !important;
  }
}

/*
 * Sonuç listesi ve puan durumu artık uzun olduğu için "Sonraki Maç" düğmesi
 * pencerenin altına kayıyordu. Düğme pencerenin dibine sabitlenir: tablo
 * kendi içinde kayar, düğme her zaman görünür kalır.
 *
 * Başlık zaten "ARSENAL 5 - 0 TOTTENHAM HOTSPUR" yazdığı için ortadaki dev
 * skor tekrardır; geniş ekranda küçültülüp yer tablolara bırakılır.
 */
@media (min-width: 1100px) {
  #endOverlay .modal > .big#finalScore {
    font-size: clamp(30px, 4.4vh, 44px) !important;
    margin: 2px 0 4px !important;
  }
  #endOverlay .modal > #restartBtn {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 4px;
  }
}

/* Hafta sonu metinleri sönük kalmasın. */
#endOverlay #weekReview,
#endOverlay #weekReview * { color: #dff1f8; }
#endOverlay #weekReview .weekReviewTitle { color: #ffffff; font-weight: 900; letter-spacing: .2px; }

/* ===================================================================== *
 * 3) PUAN DURUMU OKUNSUN
 *
 * Yan paneldeki tablo 7.7 piksel yazıyla çiziliyordu. Satır yüksekliği
 * korunarak yazı büyütüldü, sütun hizası netleştirildi, puan sütunu öne çıktı.
 * ===================================================================== */

@media (min-width: 1024px) {
  .sidePanel { width: 428px !important; }

  .standingsMini .tableHeader,
  .standingsMini .tableRow {
    font-size: 10.5px !important;
    letter-spacing: .1px;
    align-items: center;
  }
  .standingsMini .tableHeader { color: #9fd8ea !important; font-weight: 900 !important; }
  .standingsMini .tableRow { color: #eef7fb !important; font-weight: 700 !important; }

  /* Takım kısaltması ve puan: tablonun okunan iki sütunu. */
  .standingsMini .tableRow > :nth-child(2),
  .standingsMini .tableRow > :nth-child(3) { font-weight: 900 !important; color: #ffffff !important; }
  .standingsMini .tableRow > :last-child {
    font-weight: 900 !important;
    color: #ffd88a !important;
    font-size: 11.5px !important;
  }

  /* Kullanıcının takımı satırda ayırt edilsin. */
  .standingsMini .tableRow.me,
  .standingsMini .tableRow.isMe,
  .standingsMini .tableRow.you {
    background: rgba(101, 231, 255, .14) !important;
    box-shadow: inset 0 0 0 1px rgba(101, 231, 255, .35);
    border-radius: 9px;
  }

  .leagueLine b { font-size: 13px !important; }
  .fixtureLine  { font-size: 12px !important; color: #e7f6fc !important; }
  .miniLabel    { font-size: 9px !important; letter-spacing: .5px; }
  .miniValue    { font-size: 12px !important; }
}

/* ===================================================================== *
 * 4) ARMALAR VE KISALTMALAR
 *
 * Logo yüklenemediğinde (ağ engeli, yavaş bağlantı) boş bir daire kalıyordu.
 * Yedek rozet her koşulda görünür ve okunur olsun.
 * ===================================================================== */

.teamLogo.fallback,
.clubLogo.fallback {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
}
.teamLogo.fallback span,
.clubLogo.fallback span {
  display: block !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .4px;
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
}

/* Takım seçim kartlarında kısaltma rozetleri net dursun. */
#teamSelectGrid .teamLogo,
#mpTeamGrid .teamLogo { box-shadow: 0 6px 16px rgba(0,0,0,.28); }

/* ===================================================================== *
 * 5) LİG SEKMELERİ VE KURULUM METİNLERİ
 *
 * Seçili olmayan lig sekmesinin alt satırı zeminine çok yakın bir tonda
 * kalıyor, okunmuyordu.
 * ===================================================================== */

.setupTabs button      { color: #0f2c43 !important; }
.setupTabs button span,
.setupTabs button small { color: #2b4c63 !important; opacity: 1 !important; }
.setupTabs button.active,
.setupTabs button[aria-selected="true"] { color: #ffffff !important; }
.setupTabs button.active span,
.setupTabs button.active small { color: rgba(255,255,255,.88) !important; }

.setupInfo { font-size: 12.5px !important; color: #e7f6fc !important; }

/* ===================================================================== *
 * 6) ÇOK OYUNCULU ODA: SONUÇ, PUAN DURUMU VE OYUNCULAR AYRI SÜTUNLARDA
 * ===================================================================== */

@media (min-width: 1200px) {
  #multiOverlay .plMenuSplit.plMultiSplit {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  /*
   * Oda ekranı sahneden uzundu: sağ sütunun altındaki "Hazır Ver" ve
   * "Turnuvayı Başlat" düğmeleri pencerenin dışında kalıyor, tüm pencereyi
   * kaydırmak gerekiyordu. Artık iki sütun da KENDİ içinde kayar; pencere
   * sabit durur, düğmeler her zaman erişilebilir.
   */
  #multiOverlay .modal { display: flex; flex-direction: column; }
  #multiOverlay .plMenuSplit.plMultiSplit { min-height: 0; align-items: stretch; }
  #multiOverlay .plMultiSplit > .plTeamPane,
  #multiOverlay .plMultiSplit > .plRoomPane {
    min-height: 0 !important;
    max-height: min(74vh, 700px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  #mpPlayers {
    max-height: 260px;
    overflow: auto;
    border-radius: 14px;
    background: rgba(4, 18, 30, .35);
    padding: 8px;
  }
  #mpPlayers .mpPlayer { font-size: 12px !important; }
  #mpRoomInfo { font-size: 12px !important; color: #e7f6fc !important; }

  /* Oda ekranındaki hafta sonucu bloğu da iki sütun kullansın. */
  #mpEndStandingsPlus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  #mpEndStandingsPlus > .mpFinalNote { grid-column: 1 / -1; }
}