/* V13 - Home ranking replacing Comece Agora */
.pro-ranking{
  padding: clamp(70px, 7vw, 110px) 0 clamp(80px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}
.pro-ranking::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(3,8,14,.92), rgba(5,14,24,.70), rgba(3,8,14,.95)),
    url('../images/icarus-banner-leviathan.webp') center/cover no-repeat;
  opacity:.72;
  pointer-events:none;
}
.pro-ranking::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.25;
  pointer-events:none;
}
.pro-ranking .content-area{ position:relative; z-index:2; }
.pro-ranking-panel{
  border:1px solid rgba(245,178,31,.30);
  border-radius:28px;
  background:linear-gradient(135deg, rgba(10,16,24,.90), rgba(8,23,35,.82));
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(28px, 3.4vw, 54px);
}
.pro-ranking-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:34px;
}
.pro-ranking-head .pro-title{ margin-bottom:10px; }
.pro-ranking-link{
  flex:0 0 auto;
  color:#111;
  background:linear-gradient(180deg,#ffc247,#f4a000);
  border:1px solid rgba(255,206,95,.85);
  border-radius:999px;
  padding:14px 24px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 12px 30px rgba(244,160,0,.24);
}
.pro-ranking-grid{
  display:grid;
  grid-template-columns:1.25fr .9fr .9fr;
  gap:22px;
  align-items:stretch;
}
.pro-ranking-card{
  min-height:100%;
  border:1px solid rgba(245,178,31,.28);
  border-radius:22px;
  padding:24px;
  background:
    radial-gradient(circle at 80% 10%, rgba(245,178,31,.15), transparent 34%),
    linear-gradient(180deg, rgba(14,22,31,.92), rgba(7,10,14,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.30);
}
.pro-ranking-card--main{
  background:
    linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,.18)),
    url('../images/icarus-world-01.jpg') center/cover no-repeat;
}
.pro-ranking-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  color:#ffe38f;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.pro-ranking-card__top strong{
  color:#7ef5ff;
  font-size:11px;
}
.pro-ranking-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.pro-ranking-list li{
  display:grid;
  grid-template-columns:44px 1fr 92px 58px;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(2,8,13,.60);
  color:#e8e3d6;
}
.pro-ranking-list--compact li{
  grid-template-columns:44px 1fr 76px;
}
.rank-pos{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#111;
  background:linear-gradient(180deg,#ffc247,#f0a000);
  font-weight:950;
  font-size:12px;
  box-shadow:0 0 18px rgba(245,178,31,.25);
}
.rank-name{
  font-size:16px;
  font-weight:900;
  color:#fff8e7;
  letter-spacing:.03em;
}
.rank-class{
  color:#9fb0bd;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.pro-ranking-list strong{
  color:#ffca4b;
  font-size:18px;
  font-weight:950;
  text-align:right;
}
.rank-gold{ box-shadow:inset 3px 0 0 #ffd35a; }
.rank-silver{ box-shadow:inset 3px 0 0 #cfd8df; }
.rank-bronze{ box-shadow:inset 3px 0 0 #c78445; }
.pro-steps{ display:none !important; }
@media (max-width:1100px){
  .pro-ranking-grid{ grid-template-columns:1fr; }
  .pro-ranking-head{ align-items:flex-start; flex-direction:column; }
}
@media (max-width:640px){
  .pro-ranking-list li,
  .pro-ranking-list--compact li{ grid-template-columns:38px 1fr; }
  .rank-class,.pro-ranking-list strong{ grid-column:2; text-align:left; }
  .pro-ranking-link{ width:100%; justify-content:center; text-align:center; }
}