/* V43 — Ranking Elemental Rework: trovão, vento e fogo no Top 3 */
.rank-game-body{
  --rank-gold:#f2c659;
  --rank-gold-2:#d99b25;
  --rank-ink:#050912;
  --rank-panel:rgba(5,10,20,.76);
  --thunder:#65d8ff;
  --wind:#8fffe8;
  --fire:#ff8138;
}

.rank-game-page{
  background:
    radial-gradient(circle at 50% 10%, rgba(242,198,89,.13), transparent 23%),
    radial-gradient(circle at 76% 42%, rgba(255,118,46,.09), transparent 22%),
    radial-gradient(circle at 23% 48%, rgba(94,216,255,.12), transparent 26%),
    linear-gradient(180deg, rgba(2,4,10,.52), rgba(3,5,12,.88) 62%, #02050b 100%),
    url('../images/ranker.JPG') center top/cover no-repeat fixed!important;
}

.rank-game-shell{max-width:1500px!important;}
.rank-page-heading{margin-bottom:38px!important;}
.rank-page-heading h1{
  color:#fff8e7!important;
  letter-spacing:.12em!important;
  text-shadow:0 7px 0 rgba(0,0,0,.34),0 0 38px rgba(247,205,101,.22),0 0 70px rgba(91,175,255,.08)!important;
}
.rank-page-heading p{color:rgba(255,245,224,.82)!important;}

.rank-game-content{gap:30px!important;}
.rank-game-sidebar{
  background:linear-gradient(180deg,rgba(11,18,31,.82),rgba(5,9,16,.66))!important;
  border-color:rgba(239,190,82,.30)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.rank-game-sidebar button{
  color:rgba(239,232,213,.78)!important;
  background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
}
.rank-game-sidebar button.active,
.rank-game-sidebar button:hover{
  color:#fff2c8!important;
  background:linear-gradient(90deg,rgba(224,165,40,.30),rgba(18,34,56,.26))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 22px rgba(231,181,61,.12),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.rank-game-tabs{
  width:min(900px,100%)!important;
  background:linear-gradient(90deg,rgba(5,10,19,.72),rgba(5,10,19,.46))!important;
  border-color:rgba(239,190,82,.30)!important;
}
.rank-game-board{
  grid-template-columns:minmax(640px,1.08fr) minmax(440px,.88fr)!important;
  align-items:stretch!important;
}
.rank-game-podium{
  min-height:570px!important;
  padding:30px!important;
  gap:18px!important;
  border-color:rgba(244,198,89,.33)!important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,218,93,.10), transparent 26%),
    radial-gradient(circle at 20% 55%, rgba(101,216,255,.13), transparent 24%),
    radial-gradient(circle at 82% 58%, rgba(255,125,50,.12), transparent 24%),
    linear-gradient(180deg,rgba(6,12,22,.68),rgba(2,5,11,.90)),
    url('../images/icarus-dragon-02.png') center bottom/cover no-repeat!important;
  box-shadow:0 36px 110px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 80px rgba(242,198,89,.05)!important;
}
.rank-game-podium:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0 48%,rgba(101,216,255,.18) 49%,transparent 50% 100%),
    radial-gradient(circle at 52% 15%,rgba(255,255,255,.10),transparent 14%);
  mix-blend-mode:screen;
  opacity:.55;
}
.rank-game-podium:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,226,142,.45) 0 1px,transparent 1.8px);
  background-size:92px 92px;
  opacity:.10;
  animation:rankDustV43 14s linear infinite;
}
@keyframes rankDustV43{from{background-position:0 0;}to{background-position:92px -92px;}}

.rank-card{
  overflow:hidden!important;
  border-radius:14px!important;
  isolation:isolate;
  padding:24px 20px!important;
  transform:translateZ(0);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important;
}
.rank-card:hover{transform:translateY(-5px) translateZ(0)!important;}
.rank-card:before{position:relative;z-index:3;}
.rank-card .avatar,.rank-card .role,.rank-card h3,.rank-card p,.rank-card .score,.rank-card small{position:relative;z-index:4;}
.rank-card .avatar{
  background:linear-gradient(180deg,#111a2d,#070b14)!important;
  box-shadow:inset 0 0 18px rgba(255,255,255,.04),0 16px 34px rgba(0,0,0,.42)!important;
}
.rank-card .role{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
}
.rank-card h3{font-size:clamp(20px,2vw,28px)!important;line-height:1.08!important;}
.rank-card p{color:rgba(255,244,220,.78)!important;margin:0 0 12px!important;}
.rank-card .score{
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 26px rgba(0,0,0,.30)!important;
}

/* 1º lugar — Trovão */
.rank-first{
  background:
    radial-gradient(circle at 50% 22%,rgba(112,220,255,.28),transparent 22%),
    linear-gradient(180deg,rgba(98,24,28,.70),rgba(13,17,31,.94))!important;
  border-color:rgba(255,215,82,.86)!important;
  box-shadow:0 22px 78px rgba(255,203,70,.24),0 0 80px rgba(88,200,255,.10),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.rank-first:after{
  content:"";
  position:absolute;
  inset:-14%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 45%,rgba(115,220,255,.75) 46%,rgba(255,255,255,.8) 47%,transparent 49% 100%),
    linear-gradient(66deg,transparent 0 62%,rgba(255,221,92,.54) 63%,transparent 66% 100%),
    radial-gradient(circle at 54% 19%,rgba(116,225,255,.35),transparent 17%);
  opacity:.42;
  filter:blur(.2px);
  animation:thunderPulseV43 2.8s ease-in-out infinite;
}
.rank-first .avatar{border-color:#ffe25a!important;box-shadow:0 0 0 6px rgba(255,218,78,.10),0 0 38px rgba(103,216,255,.28)!important;}
.rank-first .role{color:#75e5ff!important;text-shadow:0 0 14px rgba(117,229,255,.55)!important;}
.rank-first .score{color:#fff0a7!important;background:linear-gradient(180deg,rgba(38,28,7,.80),rgba(10,9,6,.70))!important;}
@keyframes thunderPulseV43{0%,100%{opacity:.25;transform:translateX(-1%) scale(1);}45%{opacity:.62;transform:translateX(1%) scale(1.02);}50%{opacity:.86;}55%{opacity:.34;}}

/* 2º lugar — Vento */
.rank-second{
  background:
    radial-gradient(circle at 50% 28%,rgba(143,255,232,.18),transparent 24%),
    linear-gradient(180deg,rgba(24,41,55,.74),rgba(6,12,20,.94))!important;
  border-color:rgba(179,226,255,.54)!important;
  box-shadow:0 22px 60px rgba(103,205,255,.12),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.rank-second:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 0 25%,rgba(143,255,232,.18) 28%,transparent 36% 100%),
    linear-gradient(100deg,transparent 0 54%,rgba(205,239,255,.22) 57%,transparent 66% 100%),
    radial-gradient(ellipse at 20% 70%,rgba(143,255,232,.16),transparent 32%);
  transform:translateX(-22%);
  animation:windFlowV43 5.6s linear infinite;
}
.rank-second .avatar{border-color:#c9e7ff!important;box-shadow:0 0 30px rgba(143,255,232,.18)!important;}
.rank-second .role{color:#8fffe8!important;text-shadow:0 0 12px rgba(143,255,232,.42)!important;}
@keyframes windFlowV43{from{transform:translateX(-28%);}to{transform:translateX(28%);}}

/* 3º lugar — Fogo */
.rank-third{
  background:
    radial-gradient(circle at 55% 25%,rgba(255,118,50,.25),transparent 24%),
    linear-gradient(180deg,rgba(99,43,17,.76),rgba(17,8,5,.95))!important;
  border-color:rgba(255,145,72,.55)!important;
  box-shadow:0 22px 62px rgba(255,99,35,.14),inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.rank-third:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 88%,rgba(255,178,53,.42),transparent 8%),
    radial-gradient(circle at 62% 86%,rgba(255,94,31,.36),transparent 10%),
    linear-gradient(0deg,rgba(255,94,31,.28),transparent 38%);
  opacity:.55;
  animation:fireRiseV43 3.4s ease-in-out infinite;
}
.rank-third .avatar{border-color:#ff9c52!important;box-shadow:0 0 30px rgba(255,112,43,.20)!important;}
.rank-third .role{color:#ffb15d!important;text-shadow:0 0 12px rgba(255,129,56,.42)!important;}
@keyframes fireRiseV43{0%,100%{opacity:.42;transform:translateY(2%);}50%{opacity:.75;transform:translateY(-2%);}}

.rank-game-list{
  border-color:rgba(239,190,82,.30)!important;
  background:linear-gradient(180deg,rgba(5,10,19,.76),rgba(3,6,13,.90))!important;
}
.rank-row{
  grid-template-columns:64px 56px 1fr 140px!important;
  background:linear-gradient(90deg,rgba(9,16,29,.92),rgba(7,12,23,.78))!important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease!important;
}
.rank-row:hover{transform:translateX(4px);border-color:rgba(242,198,89,.32)!important;background:linear-gradient(90deg,rgba(18,27,43,.96),rgba(9,16,29,.84))!important;}
.rank-row.top1{background:linear-gradient(90deg,rgba(190,141,20,.96),rgba(32,51,59,.80))!important;box-shadow:0 0 26px rgba(101,216,255,.10)!important;}
.rank-row.top2{background:linear-gradient(90deg,rgba(126,148,160,.92),rgba(20,44,50,.76))!important;}
.rank-row.top3{background:linear-gradient(90deg,rgba(120,63,24,.94),rgba(55,22,10,.80))!important;}
.rank-row .mini{box-shadow:0 0 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)!important;}
.rank-row.top1 .mini{box-shadow:0 0 22px rgba(101,216,255,.28)!important;}
.rank-row.top2 .mini{box-shadow:0 0 22px rgba(143,255,232,.20)!important;}
.rank-row.top3 .mini{box-shadow:0 0 22px rgba(255,129,56,.22)!important;}
.rank-row p{font-size:13px!important;letter-spacing:.04em!important;color:#68f0aa!important;}
.rank-row strong{color:#fff1ac!important;}

.rank-game-note button:hover{transform:rotate(25deg) scale(1.06);filter:brightness(1.15);}

@media(max-width:1180px){
  .rank-game-board{grid-template-columns:1fr!important;}
  .rank-game-podium{min-height:auto!important;}
}
@media(max-width:760px){
  .rank-game-podium{gap:14px!important;padding:16px!important;}
  .rank-first,.rank-second,.rank-third{min-height:285px!important;}
  .rank-row{grid-template-columns:42px 42px 1fr!important;}
}