/*
 * Futbolcu Köprüsü V256 — görünüm cilası.
 *
 * Üç yer elden geçti; hiçbirinin yapısı değişmedi, yalnız okunurluk ve
 * renk düzeni iyileşti:
 *
 *   1. Bilgi penceresi (.data-guide) — yazılar 8-10 pikselden okunur
 *      boyutlara çıktı. Eski V36 katmanı pencereyi KAYDIRMADAN sığdırmaya
 *      çalışıyor, bunun bedelini yazı boyutundan ödüyordu. Artık gerekirse
 *      pencere kaydırılır; metin küçültülmez.
 *   2. Sıralama — ilk üç altın/gümüş/bronz olarak ayrıldı, kalanlar sade.
 *   3. Dereceli profil kartı ve profil penceresi — renk ve hiyerarşi.
 *
 * Bu dosya EN SON yüklenir; !important'ları ancak böyle ezebilir.
 * Renkler koyu-üstüne-koyu olmayacak şekilde seçildi (bkz.
 * tests/mobile/readability.test.mjs).
 */

/* ================================================================
   1. BİLGİ PENCERESİ
   ================================================================ */

/* Üstteki "Bilgi" düğmesi parmakla rahat basılacak boyutta olsun. */
#root .topbar .topnav__info,
.topnav__info {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.modal-backdrop:has(.data-guide) {
  align-items: center !important;
  overflow: auto !important;
  padding: 18px !important;
}

.modal-card:has(.data-guide) {
  width: min(720px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: hidden !important;
  padding: 20px !important;
  border-radius: 22px !important;
}

.modal-card:has(.data-guide) .modal-card__head {
  margin: -20px -20px 14px !important;
  padding: 18px 20px 14px !important;
}

.modal-card:has(.data-guide) .modal-card__head span {
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
}

.modal-card:has(.data-guide) .modal-card__head h3 {
  margin-top: 5px !important;
  font-size: 25px !important;
  line-height: 1.12 !important;
}

.modal-card:has(.data-guide) .modal-card__head button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  font-size: 24px !important;
}

/* Kaydırma REHBERİN içinde olur, pencerenin değil: böylece "Tamam"
   düğmesi her zaman altta ve tam boyda kalır. Düğmeyi esnek bırakmak
   telefonda 18 piksele kadar eziyordu. */
.modal-card:has(.data-guide) .data-guide {
  gap: 11px !important;
  min-height: 0 !important;
  overflow: hidden auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.modal-card:has(.data-guide) .data-guide section {
  padding: 14px 16px !important;
  border-color: #d7e7de !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #f6fcf8, #fbfdfc) !important;
}

.modal-card:has(.data-guide) .data-guide h4 {
  margin: 0 0 6px !important;
  color: #0a6541 !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.modal-card:has(.data-guide) .data-guide p {
  color: #40544a !important;
  font-size: 13.5px !important;
  line-height: 1.62 !important;
}

.modal-card:has(.data-guide) .data-guide__stats {
  gap: 10px !important;
}

.modal-card:has(.data-guide) .data-guide__stats span {
  min-height: 68px !important;
  padding: 11px 10px !important;
  border-color: #d7e7de !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #ffffff, #f3faf6) !important;
  color: #55685e !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.modal-card:has(.data-guide) .data-guide__stats b {
  margin-bottom: 3px !important;
  color: #0b6642 !important;
  font-size: 23px !important;
}

.modal-card:has(.data-guide) .data-guide__note {
  color: #62736a !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}

.modal-card:has(.data-guide) .modal-button {
  /* Yükseklik dolgudan gelir; `#root` seçicileri min-height'ı eziyor ve
     düğme telefonda 18 piksele iniyordu. */
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 52px !important;
  margin-top: 14px !important;
  padding: 16px 18px !important;
  border-radius: 15px !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

/* Alçak masaüstü pencerelerinde de yazı küçülmesin; pencere kaydırılsın. */
@media (max-height: 760px) and (min-width: 901px) {
  .modal-card:has(.data-guide) {
    width: min(720px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 16px !important;
  }
  .modal-card:has(.data-guide) .modal-card__head { margin: -16px -16px 11px !important; padding: 14px 16px 11px !important; }
  .modal-card:has(.data-guide) .modal-card__head h3 { font-size: 22px !important; }
  .modal-card:has(.data-guide) .data-guide { gap: 9px !important; }
  .modal-card:has(.data-guide) .data-guide section { padding: 11px 13px !important; }
  .modal-card:has(.data-guide) .data-guide h4 { font-size: 14px !important; }
  .modal-card:has(.data-guide) .data-guide p { font-size: 12.5px !important; line-height: 1.55 !important; }
  .modal-card:has(.data-guide) .data-guide__stats span { min-height: 58px !important; padding: 9px !important; }
  .modal-card:has(.data-guide) .data-guide__stats b { font-size: 20px !important; }
  .modal-card:has(.data-guide) .data-guide__note { font-size: 10.5px !important; }
  .modal-card:has(.data-guide) .modal-button { min-height: 46px !important; margin-top: 10px !important; padding: 13px 16px !important; }
}

@media (max-width: 900px) {
  .modal-card:has(.data-guide) { padding: 15px !important; }
  .modal-card:has(.data-guide) .modal-card__head { margin: -15px -15px 11px !important; padding: 14px 15px 11px !important; }
  .modal-card:has(.data-guide) .modal-card__head h3 { font-size: 21px !important; }
  .modal-card:has(.data-guide) .data-guide h4 { font-size: 14px !important; }
  .modal-card:has(.data-guide) .data-guide p { font-size: 12.5px !important; }
  .modal-card:has(.data-guide) .data-guide__stats span { min-height: 60px !important; font-size: 11px !important; }
  .modal-card:has(.data-guide) .data-guide__stats b { font-size: 20px !important; }
  .modal-card:has(.data-guide) .modal-button { min-height: 50px !important; padding: 15px 16px !important; font-size: 15.5px !important; }
}

/* ================================================================
   2. SIRALAMA — kürsü
   ================================================================ */

.ranked-leaderboard {
  padding: 18px 16px 16px;
  border: 1px solid #dbe8e1;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
  box-shadow: 0 10px 26px -20px rgba(12, 61, 40, .55);
}

.ranked-leaderboard-head > small {
  padding: 4px 12px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #0f6b45;
}

.ranked-leaderboard-head h3 { font-size: 23px; letter-spacing: -.015em; }

.ranked-leaderboard-list { display: grid; gap: 8px; }

.ranked-leaderboard-row {
  gap: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  transition: transform .14s ease, box-shadow .14s ease;
}

.ranked-leaderboard-row .ranked-leaderboard-name strong { font-size: 15px; }
.ranked-leaderboard-row .ranked-leaderboard-name small { color: #647a6e; }

.ranked-leaderboard-position {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  font-size: 14px;
}

.ranked-leaderboard-rating {
  padding: 5px 11px;
  border-radius: 999px;
  background: #eef7f2;
  color: #0f6b45;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

/* Kürsü: altın, gümüş, bronz. Yazı her zaman koyu, zemin açık —
   madalya rengi zeminin kendisinde, metinde değil. */
.ranked-leaderboard-row.is-podium { box-shadow: 0 8px 20px -18px rgba(70, 50, 0, .8); }

.ranked-leaderboard-row.is-podium-1 {
  border-color: #e0bd63;
  background: linear-gradient(100deg, #fff6de 0%, #fffdf6 62%, #ffffff 100%);
}
.ranked-leaderboard-row.is-podium-1 .ranked-leaderboard-position {
  border-color: #c9a233;
  background: linear-gradient(160deg, #f8dd86, #dcaa2c);
  color: #4a3608;
}
.ranked-leaderboard-row.is-podium-1 .ranked-leaderboard-rating {
  background: #f8ecc8; color: #6b5008;
}

.ranked-leaderboard-row.is-podium-2 {
  border-color: #c2ccd2;
  background: linear-gradient(100deg, #f4f7f9 0%, #fcfdfe 62%, #ffffff 100%);
}
.ranked-leaderboard-row.is-podium-2 .ranked-leaderboard-position {
  border-color: #a9b5bc;
  background: linear-gradient(160deg, #eef2f4, #bcc7cd);
  color: #37424a;
}
.ranked-leaderboard-row.is-podium-2 .ranked-leaderboard-rating {
  background: #eaeff2; color: #3c4a52;
}

.ranked-leaderboard-row.is-podium-3 {
  border-color: #d9ac84;
  background: linear-gradient(100deg, #fdf1e7 0%, #fffbf8 62%, #ffffff 100%);
}
.ranked-leaderboard-row.is-podium-3 .ranked-leaderboard-position {
  border-color: #bb8047;
  background: linear-gradient(160deg, #edbe92, #c5824a);
  color: #4a2c12;
}
.ranked-leaderboard-row.is-podium-3 .ranked-leaderboard-rating {
  background: #f6e3d3; color: #6a3f1b;
}

/* Kendi satırın kürsüde de belli olsun: kürsü rengini bozmadan bir
   çerçeve ekler. */
.ranked-leaderboard-row.is-self {
  box-shadow: 0 0 0 2px rgba(18, 153, 91, .35), 0 8px 20px -18px rgba(12, 61, 40, .7);
}
.ranked-leaderboard-row.is-self .ranked-leaderboard-name strong { color: #0f6b45; }

/* ================================================================
   3. DERECELİ PROFİL — ana ekran kartı ve profil penceresi
   ================================================================ */

.ranked-profile-card {
  padding: 16px;
  border-color: rgba(22, 126, 74, .22);
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, #eaf8f0 0%, rgba(234, 248, 240, 0) 58%),
    linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
  box-shadow: 0 12px 28px -24px rgba(12, 61, 40, .7);
}

.ranked-profile-card .ranked-profile-avatar {
  box-shadow: inset 0 0 0 1px rgba(20, 93, 60, .16), 0 0 0 3px #ffffff, 0 0 0 4px rgba(19, 148, 93, .28);
}

.ranked-profile-copy > small {
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #0f6b45;
  justify-self: start;
}
.ranked-profile-copy > strong { font-size: 19px; letter-spacing: -.01em; }
.ranked-profile-copy > span { color: #56695f; font-weight: 650; }

.ranked-ladder-pills > span {
  min-height: 40px;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f7faf8);
}
.ranked-ladder-pills > span.is-active {
  border-color: rgba(19, 148, 93, .5);
  background: linear-gradient(180deg, #eefaf3, #e2f5ea);
  box-shadow: inset 0 0 0 1px rgba(19, 148, 93, .12);
}

.ranked-profile-quickstats > span {
  padding: 10px 8px;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f7faf8);
}
.ranked-profile-quickstats b { font-size: 17px; }

/* --- Profil penceresi --- */

.ranked-profile-hero {
  padding: 18px;
  border-color: #d5e6dd;
  border-radius: 22px;
  background:
    radial-gradient(120% 150% at 0% 0%, #e6f7ee 0%, rgba(230, 247, 238, 0) 62%),
    linear-gradient(150deg, #f4fbf7, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.ranked-profile-hero .ranked-profile-avatar--large {
  box-shadow: inset 0 0 0 1px rgba(20, 93, 60, .16), 0 0 0 3px #ffffff, 0 0 0 5px rgba(19, 148, 93, .3);
}

.ranked-profile-hero > div > strong { letter-spacing: -.02em; }
.ranked-profile-hero > div > small {
  justify-self: start;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #0f6b45;
}

.ranked-profile-total > span {
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #f5faf7);
}

.ranked-profile-name-edit > span {
  color: #3f5449;
  font-size: 12px;
  letter-spacing: .02em;
}
.ranked-profile-name-edit input { border-radius: 14px; }
.ranked-profile-name-rule { color: #62756a; }

.ranked-ladder-summary {
  border-color: #d9e7e0;
  border-radius: 18px;
  box-shadow: 0 10px 24px -22px rgba(12, 61, 40, .6);
}
.ranked-ladder-summary header {
  padding: 13px;
  background: linear-gradient(120deg, #eefaf3, #f6fbf8);
}

.ranked-profile-recent > div > span { border-radius: 13px; }
.ranked-profile-recent > div > span.is-win { border-left: 3px solid #12995b; }
.ranked-profile-recent > div > span.is-loss { border-left: 3px solid #c2564f; }

.ranked-profile-security {
  border-radius: 18px;
  background: linear-gradient(120deg, #f3faf6, #ffffff);
}

@media (max-width: 900px) {
  .ranked-leaderboard { padding: 14px 12px 12px; border-radius: 18px; }
  .ranked-leaderboard-row { gap: 8px; padding: 9px 10px; border-radius: 13px; }
  .ranked-leaderboard-position { width: 27px; height: 27px; font-size: 12.5px; }
  .ranked-leaderboard-row .ranked-leaderboard-name strong { font-size: 13.5px; }
  .ranked-leaderboard-rating { padding: 4px 9px; font-size: 11.5px; }
  .ranked-profile-card { padding: 13px; border-radius: 18px; }
  .ranked-profile-copy > strong { font-size: 17px; }
  .ranked-profile-hero { padding: 13px; border-radius: 18px; }
}