/* ══════════════════════════════════════════════════════════════
   ÜLKE SIRALAMASI (country.js)
══════════════════════════════════════════════════════════════ */

/* Harita katmanı: ilk 3'ün piksel konumları.
   Diğer overlay canvas'larıyla aynı desen (bkz. #template-canvas). */
#country-spots-canvas{
  position:absolute; inset:0; pointer-events:none; z-index:17;
}

/* ── Modal ── */
#cnt-modal, #cnt-pick{
  position:fixed; inset:0; z-index:10070;
  background:rgba(6,7,12,.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
#cnt-modal .cnt-card, #cnt-pick .cnt-pick-card{
  width:min(94vw, 430px); max-height:min(88vh, 720px);
  display:flex; flex-direction:column;
  background:var(--surf2, #171a24);
  border:1px solid var(--bdr2, #2b3040);
  border-radius:16px; padding:.9rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.cnt-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin-bottom:.6rem; flex-shrink:0;
}
.cnt-title{ font-weight:900; font-size:.98rem; color:var(--txt, #e9e9f2); }
.cnt-x{
  border:none; background:transparent; cursor:pointer;
  color:var(--muted, #8b8db8); font-size:.85rem;
  padding:.2rem .35rem; border-radius:6px;
}
.cnt-x:hover{ color:var(--txt, #fff); background:var(--surf, #11131b); }

/* ── Kendi ülkem ── */
.cnt-mine{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .65rem; margin-bottom:.6rem;
  border-radius:11px;
  background:rgba(var(--accent-rgb, 123,97,255), .10);
  border:1px solid rgba(var(--accent-rgb, 123,97,255), .30);
  flex-shrink:0; flex-wrap:wrap;
}
.cnt-mine.none{ background:var(--surf, #11131b); border-color:var(--bdr2, #2b3040); }
.cnt-mine-name{ font-weight:800; font-size:.82rem; color:var(--txt, #e9e9f2); flex:1; }
.cnt-lock{
  font-size:.6rem; color:var(--muted, #8b8db8);
  font-family:var(--font-mono, monospace);
  border:1px solid var(--bdr2, #2b3040); border-radius:6px; padding:.1rem .35rem;
}
.cnt-change{
  border:1px solid var(--bdr2, #2b3040); background:transparent;
  color:var(--muted, #8b8db8); border-radius:8px;
  padding:.3rem .6rem; font-size:.7rem; font-weight:700; cursor:pointer;
}
.cnt-change:hover{ color:var(--txt, #fff); }
.cnt-change.primary{
  background:var(--accent, #7B61FF); border-color:var(--accent, #7B61FF);
  color:#fff; font-weight:800;
}

/* ── Sekmeler ── */
.cnt-tabs{ display:flex; gap:.3rem; margin-bottom:.4rem; flex-shrink:0; }
.cnt-tabs.sub{ margin-bottom:.5rem; }
.cnt-tab{
  flex:1; border:1px solid var(--bdr2, #2b3040); background:transparent;
  color:var(--muted, #8b8db8); border-radius:9px;
  padding:.4rem .5rem; font-size:.74rem; font-weight:700; cursor:pointer;
}
.cnt-tab:hover{ color:var(--txt, #fff); }
.cnt-tab.on{
  background:rgba(var(--accent-rgb, 123,97,255), .16);
  border-color:var(--accent, #7B61FF); color:var(--accent, #7B61FF);
}
.cnt-tabs.sub .cnt-tab{ font-size:.68rem; padding:.3rem .5rem; }

.cnt-hint{
  font-size:.65rem; color:var(--muted, #8b8db8);
  line-height:1.45; margin-bottom:.5rem; flex-shrink:0;
}

/* ── Sıralama listesi ── */
.cnt-list{ overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:3px; }
.cnt-row{
  display:flex; flex-direction:column; gap:.28rem;
  padding:.42rem .55rem .5rem; border-radius:9px; font-size:.78rem;
  color:var(--txt, #e9e9f2);
  border:1px solid transparent;
}
.cnt-row:nth-child(odd){ background:rgba(128,140,180,.055); }
.cnt-row.me{
  background:rgba(var(--accent-rgb, 123,97,255), .14);
  border-color:rgba(var(--accent-rgb, 123,97,255), .45);
}
.cnt-line{ display:flex; align-items:center; gap:.5rem; }

/* ── PAY ÇUBUĞU — piksel hücreleri ──
   Oyunun malzemesi piksel; bu yüzden çubuk düz bir şerit değil, ayrık
   hücrelerden örülü. Hücre ayırıcıları ::after ile ÜSTTEN çiziliyor, böylece
   dolu ve boş kısım aynı ızgaraya oturuyor (kayma olmuyor). */
.cnt-bar{
  position:relative; height:7px; border-radius:2px;
  background:var(--surf3, #1d2340);
  overflow:hidden;
}
.cnt-bar-fill{
  display:block; height:100%;
  background:var(--accent, #7B61FF);
  border-radius:2px 0 0 2px;
  transition:width .45s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.cnt-bar::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* 5px hücre + 1px boşluk */
  background-image:repeating-linear-gradient(90deg,
    transparent 0 5px, var(--surf2, #171c31) 5px 6px);
}
@media (prefers-reduced-motion: reduce){
  .cnt-bar-fill{ transition:none; }
}

/* İlk üç: madalya renkleri — sıralamanın tepesi gözle ayrışsın.
   Tonlar TEMAYA GÖRE: koyu zeminde açık gümüş doğru, açık zeminde aynı ton
   kayboluyordu (2. sıranın çubuğu görünmüyordu). Açık temada koyulaştırılır. */
:root{
  --medal-1:#f5c518;
  --medal-2:#c2ccd8;
  --medal-3:#d08a45;
}
:root[data-theme="light"]{
  --medal-1:#d9a406;
  --medal-2:#7f8da0;
  --medal-3:#b06f2c;
}
.cnt-row.top1 .cnt-bar-fill{ background:var(--medal-1); }
.cnt-row.top2 .cnt-bar-fill{ background:var(--medal-2); }
.cnt-row.top3 .cnt-bar-fill{ background:var(--medal-3); }
.cnt-row.top1 .cnt-pos{ color:var(--medal-1); font-weight:800; }
.cnt-row.top2 .cnt-pos{ color:var(--medal-2); font-weight:800; }
.cnt-row.top3 .cnt-pos{ color:var(--medal-3); font-weight:800; }

/* Yüzde — satırın en okunur sayısı, çubukla aynı bilgiyi doğrular */
.cnt-pct{
  font-family:var(--font-mono, monospace);
  font-size:.74rem; font-weight:800;
  color:var(--txt, #e9e9f2);
  flex-shrink:0; min-width:44px; text-align:right;
}

/* Liste altı özet */
.cnt-total{
  flex-shrink:0; margin-top:.5rem; padding-top:.5rem;
  border-top:1px dashed var(--bdr, #242c49);
  font-size:.64rem; color:var(--muted, #7d87ad);
  font-family:var(--font-mono, monospace); text-align:center;
}
.cnt-pos{
  width:22px; flex-shrink:0; text-align:right;
  font-family:var(--font-mono, monospace); font-size:.68rem;
  color:var(--muted, #8b8db8);
}
.cnt-flag{ font-size:1.05rem; flex-shrink:0; line-height:1; }

/* WINDOWS: bayrak emojisi glifi yok, 🇹🇷 "TR" harf çifti olarak çizilir
   (country.js ölçüp body'ye .pf-no-flag ekliyor). Kırık görünmesin diye
   harf çiftini kasıtlı bir ülke kodu rozetine çeviriyoruz. */
body.pf-no-flag .cnt-flag{
  font-size:.58rem; font-weight:900; letter-spacing:.02em;
  font-family:var(--font-mono, monospace);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:17px; padding:0 .18rem;
  border:1px solid var(--bdr2, #2b3040); border-radius:4px;
  background:var(--surf, #11131b); color:var(--muted, #8b8db8);
}
body.pf-no-flag .cnt-row.me .cnt-flag,
body.pf-no-flag .cnt-mine .cnt-flag{
  border-color:var(--accent, #7B61FF); color:var(--accent, #7B61FF);
}
.cnt-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cnt-players{
  font-size:.6rem; color:var(--muted, #8b8db8);
  font-family:var(--font-mono, monospace); flex-shrink:0;
}
.cnt-px{
  font-family:var(--font-mono, monospace); font-size:.72rem;
  font-weight:700; color:var(--accent, #7B61FF); flex-shrink:0;
}
.cnt-empty{
  color:var(--muted, #8b8db8); font-size:.72rem; text-align:center; padding:1rem;
}

/* ── İlk 3 ── */
.cnt-top3{
  margin-top:.6rem; padding-top:.6rem;
  border-top:1px solid var(--bdr2, #2b3040); flex-shrink:0;
}
.cnt-top3-head{
  font-size:.7rem; font-weight:800; color:var(--muted, #8b8db8);
  margin-bottom:.35rem;
}
.cnt-top3-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.3rem .4rem; border-radius:8px; font-size:.78rem;
}
.cnt-medal{ font-size:.95rem; flex-shrink:0; line-height:1; }
.cnt-top3-name{
  flex:1; min-width:0; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--txt, #e9e9f2);
}
.cnt-top3-name:hover{ color:var(--accent, #7B61FF); text-decoration:underline; }

.cnt-spots-toggle{
  display:flex; align-items:center; gap:.45rem;
  margin-top:.5rem; padding:.45rem .5rem;
  border:1px solid var(--bdr2, #2b3040); border-radius:9px;
  font-size:.72rem; color:var(--muted, #8b8db8); cursor:pointer;
}
.cnt-spots-toggle:hover{ color:var(--txt, #e9e9f2); }
.cnt-spots-toggle input{ accent-color:var(--accent, #7B61FF); cursor:pointer; }

/* ── Ülke seçici ── */
.cnt-pick-warn{
  font-size:.68rem; line-height:1.45; margin-bottom:.5rem;
  color:#f5c518; background:rgba(245,197,24,.10);
  border:1px solid rgba(245,197,24,.28); border-radius:9px; padding:.4rem .55rem;
}
#cnt-pick-search{
  width:100%; background:rgba(0,0,0,.28);
  border:1px solid var(--bdr2, #2b3040); border-radius:9px;
  color:var(--txt, #e9e9f2);
  /* 16px: iOS Safari daha küçük yazı tipinde alanı otomatik yakınlaştırır */
  padding:.5rem .7rem; font-size:16px; outline:none; margin-bottom:.55rem;
}
#cnt-pick-search:focus{ border-color:var(--accent, #7B61FF); }
.cnt-pick-list{ overflow-y:auto; flex:1; min-height:0; display:flex; flex-direction:column; gap:2px; }
.cnt-pick-row{
  display:flex; align-items:center; gap:.55rem;
  text-align:left; width:100%; border:none; background:transparent;
  cursor:pointer; color:var(--txt, #e9e9f2);
  padding:.45rem .55rem; border-radius:8px; font-size:.78rem;
}
.cnt-pick-row:hover{ background:rgba(var(--accent-rgb, 123,97,255), .16); }

@media (max-width: 768px){
  #cnt-modal .cnt-card, #cnt-pick .cnt-pick-card{ width:100%; max-height:92vh; }
  .cnt-row, .cnt-pick-row{ font-size:.82rem; padding:.5rem .55rem; }
}