/* =============================================================
   AIRSOFT.CSS — Green Nature Arcade
   Yalnızca airsoft liderlik tablosu sayfası (airsoft.html) için.
   Bağımlılık: base.css önce yüklenmeli.
   ============================================================= */


/* ── Hero Bölümü ─────────────────────────────────────────────── */
#hero {
  min-height: 80svh;           /* ana sayfadan daha kısa hero */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.25rem 5rem;
}

/* Airsoft hero'ya özel arka plan gradyanları — pembe ağırlıklı */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(199,36,177,.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 80% 70%, rgba(0,245,255,.12) 0%, transparent 65%),
    radial-gradient(ellipse 90% 90% at 50% 50%, rgba(199,36,177,.04) 0%, transparent 80%);
}

/* Airsoft hero'ya özel başlık boyutu (ana sayfadan biraz küçük) */
.hero-title { font-size: clamp(2.6rem, 12vw, 5rem); }

/* Hero açıklama metni */
.hero-sub {
  font-size: clamp(.88rem, 3vw, 1.05rem);
  max-width: 480px;
}

/* Pembe renk temalı hero badge (airsoft sayfasında cyan değil pembe) */
.hero-badge {
  position: relative;
  display: inline-block;
  background: rgba(199,36,177,.1);
  border: 1px solid rgba(199,36,177,.35);
  color: var(--pink);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: .35rem 1.1rem;
  border-radius: 100px;
  margin-bottom: 1.4rem;
  animation: pulse-pk 2.2s ease-in-out infinite;
}

/* Pembe pulsing halo efekti */
@keyframes pulse-pk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,36,177,.3); }
  50%       { box-shadow: 0 0 0 10px rgba(199,36,177,0); }
}


/* ── Hakkında Bölümü ─────────────────────────────────────────── */
#about { background: var(--bg2); }

/* 1 → 2 → 3 sütun responsive kart ızgarası */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 600px) { .about-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .about-grid { grid-template-columns: repeat(3, 1fr); } }

/* Tek özellik kartı */
.about-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: border-color .18s;
}
.about-card:hover { border-color: rgba(0,245,255,.3); }

.ac-icon  { font-size: 1.8rem; }
.ac-title { font-size: .88rem; font-weight: 800; color: var(--cyan); }
.ac-body  { font-size: .82rem; color: var(--muted); line-height: 1.65; }

/* Güvenlik uyarı çubuğu */
.warning-bar {
  margin-top: 1.75rem;
  background: rgba(199,36,177,.08);
  border: 1px solid rgba(199,36,177,.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .82rem;
  color: var(--text);
}
.warning-bar span { font-size: 1.4rem; flex-shrink: 0; }


/* ── Liderlik Tablosu Bölümü ─────────────────────────────────── */
#leaderboard { background: var(--bg3); }

/* Kart başlığı — dönen gradient efektli tanıtım alanı */
.lb-hero-card {
  margin-top: 1.75rem;
  background: linear-gradient(135deg, rgba(199,36,177,.12), rgba(0,245,255,.06));
  border: 1px solid rgba(199,36,177,.3);
  border-radius: 18px;
  padding: 2rem 1.25rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
/* Dönen ambient gradient (base.css'deki @keyframes spin kullanır) */
.lb-hero-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(transparent, rgba(199,36,177,.05), transparent 35%);
  animation: spin 5s linear infinite;
}

.lb-hero-inner { position: relative; z-index: 1; }
.lb-trophy     { font-size: 3.5rem; margin-bottom: .3rem; filter: drop-shadow(0 0 22px gold); }
.lb-headline   { font-size: clamp(1.2rem,4vw,1.6rem); font-weight: 900; letter-spacing: -.3px; margin-bottom: .3rem; }
.lb-desc       { font-size: .82rem; color: var(--muted); max-width: 380px; margin: 0 auto; }

/* Özet istatistikler (oyuncu sayısı, en yüksek, ortalama) */
.lb-meta {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.lb-meta-item { text-align: center; }
.lb-meta-val  { font-size: 1.15rem; font-weight: 900; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
.lb-meta-lbl  { font-size: .6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }


/* ── Skor Tablosu ────────────────────────────────────────────── */
.lb-table-wrap {
  overflow-x: auto;         /* dar ekranda yatay kaydırma */
  margin-top: 1.5rem;
  border-radius: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  font-size: .82rem;
}

/* Tablo başlık satırı */
thead tr {
  background: linear-gradient(90deg, rgba(199,36,177,.18), rgba(0,245,255,.08));
  border-bottom: 1px solid rgba(0,245,255,.2);
}
th {
  padding: .9rem .85rem;
  text-align: left;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
}

/* Veri satırları */
tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(0,245,255,.04); }

td { padding: .85rem .85rem; color: var(--text); white-space: nowrap; }

/* Sıralama rozeti daireleri */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 900;
}
.rank-1 { background: linear-gradient(135deg,#ffd700,#b8860b); color: #000; box-shadow: 0 0 12px rgba(255,215,0,.5); }  /* altın */
.rank-2 { background: linear-gradient(135deg,#c0c0c0,#808080); color: #000; }                                             /* gümüş */
.rank-3 { background: linear-gradient(135deg,#cd7f32,#8b4513); color: #fff; }                                             /* bronz */
.rank-n { background: rgba(255,255,255,.06); color: var(--muted); }                                                       /* diğerleri */

/* Parlayan skor değeri */
.score-cell {
  font-weight: 800;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan);
}

/* Ülke bayrağı emoji boşluğu */
.country-flag { margin-right: .35rem; }

/* Kayıt yokken gösterilen boş durum */
.lb-empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.lb-empty-icon { font-size: 2.5rem; opacity: .4; }
.lb-empty-txt  { font-size: .82rem; color: var(--muted); }


/* ── Kurallar Bölümü ─────────────────────────────────────────── */
#rules { background: var(--bg2); }

/* 1 → 2 sütun responsive ızgara */
.rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 1.75rem;
}
@media (min-width: 560px) { .rules-grid { grid-template-columns: 1fr 1fr; } }

/* Tek kural öğesi */
.rule-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .82rem;
}

/* Numaralı daire */
.rule-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,245,255,.08);
  border: 1px solid rgba(0,245,255,.25);
  color: var(--cyan);
  font-size: .72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rule-text { color: var(--muted); line-height: 1.55; }
.rule-text strong { color: var(--text); display: block; margin-bottom: .1rem; font-size: .84rem; }


/* ── Footer Eki — Geri Butonu ────────────────────────────────── */
/* Airsoft sayfası footer'ına özel "← Back to All Games" bağlantısı */
.ft-back {
  display: inline;
  color: var(--pink);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  transition: text-shadow .18s;
}
.ft-back:hover { text-shadow: 0 0 12px var(--pink); }