/* ── Rank Badges (inline header/comments) ── */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}

.rank-badge svg {
  width: 20px;
  height: 24px;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.mobile-user-header .rank-badge,
.user-greeting .rank-badge { margin-right: 5px; }
.comment__author .rank-badge { margin-right: 5px; }

/* ════════════════════════════════════════════
   RANKS SECTION — coaching page (full cards)
   ════════════════════════════════════════════ */
.ranks-section {
  padding: 72px 20px 80px;
  background: #080808;
  border-top: 1px solid #161616;
  border-bottom: 1px solid #161616;
  position: relative;
  overflow: hidden;
}
.ranks-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(205,127,50,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(0,204,238,0.03) 0%, transparent 50%);
  pointer-events: none;
}

.ranks-section__inner {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

.ranks-section__title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 12px;
}

.ranks-section__subtitle {
  text-align: center;
  color: #555;
  font-size: 13px;
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto 52px;
}

.ranks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* ── Rank card base ── */
.rank-card {
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  border-top: 2px solid transparent;
  border-radius: 2px;
  padding: 32px 18px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}

/* Subtle noise texture */
.rank-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -60deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,0.01) 18px,
    rgba(255,255,255,0.01) 19px
  );
  pointer-events: none;
}

.rank-card:hover {
  transform: translateY(-8px);
}

/* ── Tier color treatments ── */
.rank-card--bronze {
  border-top-color: #CD7F32;
  background: linear-gradient(180deg, rgba(205,127,50,0.04) 0%, #0d0d0d 40%);
}
.rank-card--silver {
  border-top-color: #C0C0C0;
  background: linear-gradient(180deg, rgba(192,192,192,0.04) 0%, #0d0d0d 40%);
}
.rank-card--gold {
  border-top-color: #FFD700;
  background: linear-gradient(180deg, rgba(255,215,0,0.05) 0%, #0d0d0d 40%);
}
.rank-card--diamond {
  border-top-color: #00CCEE;
  background: linear-gradient(180deg, rgba(0,204,238,0.05) 0%, #0d0d0d 40%);
}

.rank-card--bronze:hover  { border-color: #CD7F32; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(205,127,50,0.1); }
.rank-card--silver:hover  { border-color: #C0C0C0; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(192,192,192,0.1); }
.rank-card--gold:hover    { border-color: #FFD700; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(255,215,0,0.12); }
.rank-card--diamond:hover { border-color: #00CCEE; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(0,204,238,0.14); }

/* ── Touch / tap states (mobile) ── */
.rank-card:active { transform: translateY(-8px); }
.rank-card--bronze:active, .rank-card--bronze.is-tapped  { border-color: #CD7F32; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(205,127,50,0.1); }
.rank-card--silver:active, .rank-card--silver.is-tapped  { border-color: #C0C0C0; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(192,192,192,0.1); }
.rank-card--gold:active,   .rank-card--gold.is-tapped    { border-color: #FFD700; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(255,215,0,0.12); }
.rank-card--diamond:active,.rank-card--diamond.is-tapped { border-color: #00CCEE; box-shadow: 0 24px 48px rgba(0,0,0,0.7), 0 0 40px rgba(0,204,238,0.14); }

.rank-card:active svg,
.rank-card.is-tapped svg { transform: scale(1.06); }
.rank-card--bronze:active svg,  .rank-card--bronze.is-tapped svg  { filter: drop-shadow(0 4px 18px rgba(205,127,50,0.4)); }
.rank-card--silver:active svg,  .rank-card--silver.is-tapped svg  { filter: drop-shadow(0 4px 18px rgba(192,192,192,0.35)); }
.rank-card--gold:active svg,    .rank-card--gold.is-tapped svg    { filter: drop-shadow(0 4px 18px rgba(255,215,0,0.45)); }
.rank-card--diamond:active svg, .rank-card--diamond.is-tapped svg { filter: drop-shadow(0 4px 18px rgba(0,204,238,0.5)); }

/* ── Badge SVG ── */
.rank-card svg {
  width: 60px;
  height: 72px;
  margin-bottom: 18px;
  position: relative;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.7));
  transition: filter .3s, transform .3s;
}
.rank-card:hover svg {
  transform: scale(1.06);
}
.rank-card--bronze:hover svg  { filter: drop-shadow(0 4px 18px rgba(205,127,50,0.4)); }
.rank-card--silver:hover svg  { filter: drop-shadow(0 4px 18px rgba(192,192,192,0.35)); }
.rank-card--gold:hover svg    { filter: drop-shadow(0 4px 18px rgba(255,215,0,0.45)); }
.rank-card--diamond:hover svg { filter: drop-shadow(0 4px 18px rgba(0,204,238,0.5)); }

/* ── Rank name ── */
.rank-card__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
  position: relative;
}
.rank-card--bronze  .rank-card__name { color: #CD7F32; }
.rank-card--silver  .rank-card__name { color: #C0C0C0; }
.rank-card--gold    .rank-card__name { color: #FFD700; }
.rank-card--diamond .rank-card__name { color: #00CCEE; }

/* ── Bloc count ── */
.rank-card__blocs {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: #333;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #161616;
  width: 100%;
}

/* ── Reward ── */
.rank-card__reward {
  font-size: 12px;
  color: #666;
  line-height: 1.65;
  position: relative;
}
.rank-card__reward strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
}


/* ════════════════════════════════════════════
   RANKS BAR — index page
   ════════════════════════════════════════════ */
.ranks-bar {
  padding: 72px 20px 80px;
  background: #070707;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  position: relative;
  overflow: hidden;
}

/* Ambient background glow spanning all 4 tier colors */
.ranks-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(205,127,50,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 38% 50%, rgba(192,192,192,0.03) 0%, transparent 35%),
    radial-gradient(ellipse at 62% 50%, rgba(255,215,0,0.04) 0%, transparent 35%),
    radial-gradient(ellipse at 88% 50%, rgba(0,204,238,0.05) 0%, transparent 40%);
  pointer-events: none;
}

/* Fine diagonal texture */
.ranks-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 28px,
    rgba(255,255,255,0.008) 28px,
    rgba(255,255,255,0.008) 29px
  );
  pointer-events: none;
}

.ranks-bar__inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.ranks-bar__header {
  text-align: center;
  margin-bottom: 52px;
}

.ranks-bar__eyebrow {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 12px;
}

.ranks-bar__heading {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #e0e0e0;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}
.ranks-bar__heading::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 10px auto 0;
  box-shadow: 0 0 10px rgba(255,255,0,0.4);
}

.ranks-bar__subtitle {
  font-size: 13px;
  color: #3a3a3a;
  margin-top: 14px;
  letter-spacing: .3px;
}

/* ── Track wrapper (holds the connector line) ── */
.ranks-bar__track {
  position: relative;
}

/* Horizontal progression line between badge centers */
.ranks-bar__track::before {
  content: '';
  position: absolute;
  top: 38px;
  left: calc(12.5%);
  right: calc(12.5%);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(205,127,50,0.6) 0%,
    rgba(192,192,192,0.5) 33%,
    rgba(255,215,0,0.6) 66%,
    rgba(0,204,238,0.6) 100%
  );
  z-index: 0;
}

.ranks-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* ── Individual item ── */
.ranks-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 14px 24px;
  background: #0c0c0c;
  border: 1px solid #181818;
  border-radius: 2px;
  text-decoration: none;
  position: relative;
  transition: border-color .28s, transform .28s, box-shadow .28s;
  cursor: default;
}

/* Top tier-color accent bar */
.ranks-bar__item--bronze  { border-top: 2px solid rgba(205,127,50,0.5); }
.ranks-bar__item--silver  { border-top: 2px solid rgba(192,192,192,0.4); }
.ranks-bar__item--gold    { border-top: 2px solid rgba(255,215,0,0.55); }
.ranks-bar__item--diamond { border-top: 2px solid rgba(0,204,238,0.55); }

.ranks-bar__item:hover { transform: translateY(-6px); }
.ranks-bar__item--bronze:hover  { border-color: rgba(205,127,50,0.5);  box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(205,127,50,0.09); }
.ranks-bar__item--silver:hover  { border-color: rgba(192,192,192,0.4); box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(192,192,192,0.07); }
.ranks-bar__item--gold:hover    { border-color: rgba(255,215,0,0.5);   box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.10); }
.ranks-bar__item--diamond:hover { border-color: rgba(0,204,238,0.5);   box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(0,204,238,0.12); }

/* ── Touch / tap states (mobile) ── */
.ranks-bar__item:active { transform: translateY(-6px); }
.ranks-bar__item--bronze:active,  .ranks-bar__item--bronze.is-tapped  { border-color: rgba(205,127,50,0.5);  box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(205,127,50,0.09); }
.ranks-bar__item--silver:active,  .ranks-bar__item--silver.is-tapped  { border-color: rgba(192,192,192,0.4); box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(192,192,192,0.07); }
.ranks-bar__item--gold:active,    .ranks-bar__item--gold.is-tapped    { border-color: rgba(255,215,0,0.5);   box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(255,215,0,0.10); }
.ranks-bar__item--diamond:active, .ranks-bar__item--diamond.is-tapped { border-color: rgba(0,204,238,0.5);   box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 30px rgba(0,204,238,0.12); }

.ranks-bar__item:active .ranks-bar__badge-wrap svg,
.ranks-bar__item.is-tapped .ranks-bar__badge-wrap svg { transform: scale(1.1) translateY(-2px); }
.ranks-bar__item--bronze:active  .ranks-bar__badge-wrap svg, .ranks-bar__item--bronze.is-tapped  .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(205,127,50,0.55)); }
.ranks-bar__item--silver:active  .ranks-bar__badge-wrap svg, .ranks-bar__item--silver.is-tapped  .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(192,192,192,0.5)); }
.ranks-bar__item--gold:active    .ranks-bar__badge-wrap svg, .ranks-bar__item--gold.is-tapped    .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(255,215,0,0.6)); }
.ranks-bar__item--diamond:active .ranks-bar__badge-wrap svg, .ranks-bar__item--diamond.is-tapped .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(0,204,238,0.65)); }

/* ── Badge wrap ── */
.ranks-bar__badge-wrap {
  width: 52px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.ranks-bar__badge-wrap svg {
  width: 48px;
  height: 58px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.8));
  transition: filter .28s, transform .28s;
}
.ranks-bar__item:hover .ranks-bar__badge-wrap svg { transform: scale(1.1) translateY(-2px); }
.ranks-bar__item--bronze:hover  .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(205,127,50,0.55)); }
.ranks-bar__item--silver:hover  .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(192,192,192,0.5)); }
.ranks-bar__item--gold:hover    .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(255,215,0,0.6)); }
.ranks-bar__item--diamond:hover .ranks-bar__badge-wrap svg { filter: drop-shadow(0 6px 16px rgba(0,204,238,0.65)); }

/* ── Text info ── */
.ranks-bar__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.ranks-bar__name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.ranks-bar__item--bronze  .ranks-bar__name { color: #CD7F32; }
.ranks-bar__item--silver  .ranks-bar__name { color: #C0C0C0; }
.ranks-bar__item--gold    .ranks-bar__name { color: #FFD700; }
.ranks-bar__item--diamond .ranks-bar__name { color: #00CCEE; }

.ranks-bar__blocs {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2a2a2a;
  padding: 3px 8px;
  border: 1px solid #1e1e1e;
  border-radius: 2px;
}

.ranks-bar__reward {
  font-size: 11px;
  color: #444;
  line-height: 1.4;
  padding-top: 4px;
}

/* ── Footer CTA ── */
.ranks-bar__footer {
  text-align: center;
  margin-top: 40px;
}

.ranks-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  background: transparent;
  color: #333;
  border: 1px solid #1e1e1e;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.ranks-bar__cta:hover {
  color: var(--accent);
  border-color: rgba(255,255,0,0.25);
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .ranks-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ranks-bar { padding: 52px 16px 60px; }
  .ranks-bar__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .ranks-bar__track::before { display: none; }
  .ranks-bar__heading { font-size: 22px; }
}

@media (max-width: 420px) {
  .ranks-bar__reward { display: none; }
  .ranks-bar__item { padding: 20px 10px 18px; }
}