/* ============= БАЗОВОЕ ============= */
:root{
  --card-radius: 1px;
  --gap: 20px;         /* отступ между TOP‑3 карточками */
  --font-main: "Segoe UI","Roboto","Arial",sans-serif;
  --thin-maxw: 900px;  /* ширина контейнера списка рангов */
  --top-w: 260px;      /* ширина TOP‑3 карточки (поуже) */
}

.top-ranks-cards,
.all-ranks-cards { font-family: var(--font-main); }

/* ============= TOP-3 ============= */
.top-ranks-cards{
  display:flex;
  gap: var(--gap);
  justify-content:center;
  flex-wrap:wrap;
  margin: 0 auto 24px;
  max-width: calc(var(--top-w) * 3 + var(--gap) * 2);
}

.top-card{
  position:relative; overflow:hidden; flex-shrink:0;
  width: var(--top-w); max-height:330px; padding:16px;
  background-color:transparent!important; border:1px solid rgba(255,255,255,.1);
  border-radius:var(--card-radius); box-shadow:0 0 12px #00000055; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition: box-shadow .2s ease, filter .2s ease;
}
.top-card:hover{ filter:brightness(1.05); }

/* фон из /public/glory_ru/images/fam_job через style="--bg:url(...)" */
.top-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bg); background-size:cover; background-position:center;
  opacity:.4; transform: scale(1.22) translateX(70px) translateY(4px);
  transition: transform .25s ease, opacity .25s ease;
}
.top-card-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:1; }
.top-card>*{ position:relative; z-index:2; }

/* свечение рамки */
.gold-glow{   box-shadow:0 0 6px 2px #FFD700!important; }
.silver-glow{ box-shadow:0 0 6px 2px #C0C0C0!important; }
.bronze-glow{ box-shadow:0 0 6px 2px #cd7f32!important; }

/* медаль и подпись */
.medal-wrap{ width:100%; height:33%; display:flex; justify-content:center; align-items:center; }
.medal-img{ max-height:100%; max-width:60%; object-fit:contain; }
.medal-label{ font-weight:700; font-size:1rem; color:#fff; text-transform:uppercase; margin-top:2px; text-shadow:1px 1px 2px #000; }

/* полоса с ником/гильдией */
.nick-strip{
  width: calc(100% + 32px); margin-left:0px;
  background:rgba(0,0,0,.78); padding:6px 8px; line-height:1.1;
}
.nick-strip .nick-text{
  display:block; color:#fff; font-weight:700; font-size:1.05rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nick-strip .guild-small{
  display:block; color:#6C757D; font-size:.9rem; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1em;
}

/* убийства и икон-ряд */
.kills-big{ color:#fdd835; font-weight:700; font-size:1.05rem; margin-top:2px; }
.icon-row{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:6px; }
.icon-row .faction-icon,.icon-row .job-icon{ width:22px; height:22px; object-fit:contain; display:inline-block; }
.icon-row .rank-icon{ width:40px; height:24px; object-fit:contain; display:inline-block; }

.playtime-small{ color:#c8c8c8; font-size:.8rem; margin-top:4px; }

/* ============= СПИСОК С 4 МЕСТА ============= */
.all-ranks-cards{
  display:flex; flex-direction:column; gap:10px; margin-top:24px;
  max-width: var(--thin-maxw); margin-left:auto; margin-right:auto;
}

/* базовая тонкая карточка + фоновое изображение из fam_job через --bg */
.rank-card.thin-wide{
  position:relative; overflow:hidden;
  background:transparent; border:1px solid rgba(255,255,255,.15);
  border-radius:var(--card-radius); box-shadow:none;
  width:100%; padding:12px 16px;
}
.rank-card.thin-wide::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--bg); background-repeat:no-repeat;
  background-position: center center; /* фон по центру */
    background-size: auto 100%; /* подогнать по высоте, без обрезки */
  opacity:.2; transform: scale(6) translateX(-40px) translateY(15px);
}
.rank-card.thin-wide>*{ position:relative; z-index:1; }

/* ОДНА ЛИНИЯ: место · фракция · класс · ник · гильдия · время · ранг · убийства (ровная таблица) */
.rank-card.thin-wide.one-line{
  display:grid; align-items:center; column-gap:14px;
  grid-template-columns:
    max-content        /* № */
    max-content        /* фракция */
    max-content        /* класс */
    minmax(0, 2fr)     /* НИК — основная гибкая колонка */
    minmax(0, 1.5fr)   /* ГИЛЬДИЯ — вторая гибкая колонка */
    max-content        /* время */
    max-content        /* ранг-иконка */
    max-content;       /* убийства */
}

/* базовые ячейки */
.rank-card.thin-wide.one-line .rc-col{
  min-width:0;
  display:flex; align-items:center;
  gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Выравнивания по колонкам */
.rank-card.thin-wide.one-line > :nth-child(1),
.rank-card.thin-wide.one-line > :nth-child(2),
.rank-card.thin-wide.one-line > :nth-child(3),
.rank-card.thin-wide.one-line > :nth-child(4),
.rank-card.thin-wide.one-line > :nth-child(5){
  justify-self: start;  text-align: left;   /* №, фракция, класс, ник, гильдия — слева */
}
.rank-card.thin-wide.one-line > :nth-child(6){
  justify-self: center; text-align: center; /* время — по центру */
}
.rank-card.thin-wide.one-line > :nth-child(7){
  justify-self: center; text-align: center; /* ранг — по центру */
}
.rank-card.thin-wide.one-line > :nth-child(8){
  justify-self: end;    text-align: right;  /* убийства — по правому краю */
}

/* текстовые */
.rc-nick,.rc-guild{ color:#fff; font-size:1rem; }
.rc-guild:empty::before{ content:"\00A0"; }
.rc-time{ color:#c8c8c8; font-size:.95rem; }

/* выделения */
.rc-pos{ color:#aaa; font-weight:700; font-size:.95rem; }
.rc-kills{ color:#0D6DFE; font-weight:700; font-size:.95rem; }

/* иконки */
.rc-faction,.rc-class{ width:20px; height:20px; object-fit:contain; }
.rc-rank{ width:28px; height:20px; object-fit:contain; }

.rank-icon{
  display:inline-block; background-repeat:no-repeat; background-position:center; background-size:contain;
}
.top-card .rank-icon{ width:40px; height:24px; }
.rank-card .rank-icon{ width:32px; height:32px; }

/* ============= АДАПТИВ ============= */
@media (max-width: 900px){
  .rank-card.thin-wide.one-line{
    grid-template-columns:
      max-content max-content max-content
      minmax(0,1.8fr) minmax(0,1.2fr)
      max-content max-content max-content;
    column-gap:12px;
  }
}
@media (max-width: 680px){
  .rank-card.thin-wide.one-line{
    grid-template-columns:
      max-content max-content max-content
      minmax(0,1.4fr) minmax(0,1fr)
      max-content max-content max-content;
    column-gap:10px;
  }
}
@media (max-width: 768px){
  .top-ranks-cards{ flex-direction:column; align-items:center; }
  .top-card{ width:90%; max-width:320px; }
  .medal-img{ max-width:70%; }
  .nick-strip .nick-text{ font-size:1rem; }
  .guild-small{ font-size:.9rem; }
  .kills-big{ font-size:1rem; }
}
.rank-card.thin-wide.one-line{
  display:grid;
  align-items:center;
  grid-template-columns:
    max-content        /* № */
    max-content        /* фракция */
    max-content        /* класс */
    minmax(0, 2fr)     /* ник */
    minmax(0, 1.5fr)   /* гильдия */
    max-content        /* время */
    max-content        /* ранг-иконка */
    max-content;       /* убийства */
  
  /* основной отступ */
  column-gap: 12px;
}

/* увеличиваем только между № и фракцией, и между классом и ником */
.rank-card.thin-wide.one-line > :nth-child(1) { margin-right: 26px; } /* № → фракция */
.rank-card.thin-wide.one-line > :nth-child(3) { margin-right: 80px; } /* класс → ник */


.rank-card.thin-wide{ min-height: 64px; } /* чтобы фон не схлопывался совсем */
/* Эффект яркости + цветная рамка при наведении */
.top-card,
.rank-card.thin-wide {
  transition: filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.top-card:hover,
.rank-card.thin-wide:hover {
  filter: brightness(1.5); /* ярче */
  border-color: rgba(255, 255, 255, 0.6); /* подсветка рамки */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* лёгкое свечение */
}