/* Ranking — Ishgard RO */
.ranking-header{
  min-height:286px;
  background:#eaf3fb;
}
.ranking-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(8,34,66,.10) 0%,rgba(8,34,66,.02) 52%,rgba(244,248,252,.10) 75%,#f4f8fc 100%),
    url('../images/banner/slide-4.webp') center 50% / cover no-repeat;
  opacity:1;
}
.ranking-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:78px;
  background:linear-gradient(180deg,rgba(244,248,252,0),#f4f8fc 92%);
  border-radius:0;
  filter:none;
}

.ranking-layout{
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.ranking-sidebar{position:static;overflow:hidden}
.ranking-content{min-width:0;display:flex;flex-direction:column;gap:18px}
.ranking-page-shell{position:relative;z-index:2}
.ranking-footer{position:relative;z-index:3;overflow:visible}
.ranking-float{display:none;position:absolute;z-index:100;pointer-events:none;user-select:none;height:auto;will-change:transform}
.ranking-float--one{width:310px;left:max(18px,calc(50% - 712px));top:-365px;animation:rankingFloatOne 7.8s ease-in-out infinite alternate}
@media(min-width:1500px){
  .ranking-float{display:block}
  .ranking-page-shell{min-height:700px}
}
@keyframes rankingFloatOne{from{transform:translate3d(-3px,4px,0) rotate(-.3deg)}to{transform:translate3d(5px,-8px,0) rotate(.4deg)}}
@media(prefers-reduced-motion:reduce){.ranking-float{animation:none}}

.family-group{border-radius:12px;overflow:hidden}
.family-group .side-item{border-radius:12px}
.family-group.active{background:#f8fbff}
.family-group.active .side-item{color:var(--blue);background:#edf6ff}
.family-group.active .side-icon{background:#dceeff;color:var(--blue)}
.family-group.active .side-item>i{transform:none;color:var(--blue)}
.class-subnav,.family-group.active .class-subnav{display:none!important}
.class-subitem{width:100%;height:29px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;border-radius:8px;padding:0 9px;color:#7a899c;font-size:11px;font-weight:700;text-align:left}
.class-subitem i{font-size:11px;color:#c0cad5}
.class-subitem:hover{background:#edf6ff;color:var(--blue)}
.class-subitem.active{background:#e5f2ff;color:var(--blue);font-weight:900}
.class-subitem.active i{color:var(--blue)}

.ranking-overview{padding:22px 24px 24px;overflow:visible}
.ranking-title-row{margin-bottom:13px}
.ranking-title-minimal{display:block}
.ranking-eyebrow{display:block;font-size:12px;font-weight:900;letter-spacing:1.55px;color:#6b8eb6;margin:0}

.ranking-inline-search{
  position:relative;
  display:flex;
  align-items:center;
  height:58px;
  padding:6px 6px 6px 17px;
  margin-bottom:22px;
  background:#f8fbff;
  border:1px solid #dce8f5;
  border-radius:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  z-index:20;
}
.ranking-inline-search>i{font-size:15px;color:#91a1b4;margin-right:11px}
.ranking-inline-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#2e4058;font-size:14px;font-weight:600}
.ranking-inline-search input::placeholder{color:#9aa8b9;font-weight:500}
.ranking-inline-search>button{height:44px;padding:0 23px;border:0;border-radius:11px;background:linear-gradient(180deg,#2d86eb,#1768c5);color:#fff;font-size:12px;font-weight:900;letter-spacing:.3px;box-shadow:0 8px 17px rgba(31,124,242,.16)}
.ranking-inline-search .search-results{top:64px;z-index:50}

.podium{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:12px;align-items:end;padding-top:2px}
.podium-card{position:relative;border:1px solid #e8eef6;border-radius:16px;background:#fff;text-align:center;padding:21px 12px 15px;min-height:154px;box-shadow:0 9px 20px rgba(34,73,115,.05)}
.podium-card.first{min-height:175px;padding-top:25px;background:linear-gradient(180deg,#fffdf5 0%,#fff 74%);border-color:#f1df9e;box-shadow:0 12px 28px rgba(185,144,31,.11)}
.podium-rank{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:9px;background:#edf5ff;color:#1f7cf2;display:grid;place-items:center;font-size:12px;font-weight:900}.podium-card.first .podium-rank{background:#fff1b9;color:#9b6c00}
.podium-avatar{width:54px;height:54px;border-radius:16px;margin:0 auto 10px;background:linear-gradient(135deg,#e8f4ff,#dcecff);display:grid;place-items:center;color:#2b7fd7;font-size:20px}.podium-card.first .podium-avatar{width:62px;height:62px;border-radius:19px;background:linear-gradient(135deg,#fff1bc,#ffe084);color:#a46c00;font-size:24px}
.podium-card strong{display:block;font-size:14px;color:#26364d}.podium-card .podium-class{display:block;font-size:11px;color:#8998ab;margin-top:4px}.podium-points{display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:5px 8px;border-radius:99px;background:#f4f8fd;color:#60738b;font-size:11px;font-weight:800}.podium-card.first .podium-points{background:#fff5ce;color:#956c13}

.ranking-table-panel{overflow:hidden}
.table-headbar{padding:17px 19px;border-bottom:1px solid #eaf0f6;display:flex;align-items:center;justify-content:space-between;gap:15px}.table-headbar strong{display:block;font-size:15px}.table-headbar span{display:block;font-size:11px;color:#9aa6b6;margin-top:3px}.table-actions button{width:34px;height:34px;border-radius:10px;border:1px solid #e4ebf3;background:#fff;color:#7d8da1}.table-actions button:hover{color:#1f7cf2;border-color:#cde1f9;background:#f5faff}
.ranking-table-wrap{overflow:visible;width:100%}
.ranking-table{width:100%;border-collapse:collapse;table-layout:fixed}
.ranking-table thead th{height:39px;background:#f8fbfe;color:#8593a7;text-transform:uppercase;letter-spacing:.35px;font-size:11px;font-weight:900;text-align:left;padding:0 8px;border-bottom:1px solid #e9eef4;white-space:nowrap}
.ranking-table tbody td{padding:10px 8px;border-bottom:1px solid #eff3f7;font-size:11px;color:#5f7086;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranking-table tbody tr:last-child td{border-bottom:0}.ranking-table tbody tr:hover{background:#fbfdff}
.ranking-table th:nth-child(1),.ranking-table td:nth-child(1){width:5%;text-align:center}
.ranking-table th:nth-child(2),.ranking-table td:nth-child(2){width:22%}
.ranking-table th:nth-child(3),.ranking-table td:nth-child(3){width:18%}
.ranking-table th:nth-child(4),.ranking-table td:nth-child(4){width:8%;text-align:center}
.ranking-table th:nth-child(5),.ranking-table td:nth-child(5){width:8%;text-align:center}
.ranking-table th:nth-child(6),.ranking-table td:nth-child(6){width:17%}
.ranking-table th:nth-child(7),.ranking-table td:nth-child(7){width:20%;text-align:left}
.rank-pos{width:25px;height:25px;border-radius:8px;background:#eef5ff;color:#1f7cf2;display:grid;place-items:center;margin:auto;font-size:11px;font-weight:900}.rank-pos.top1{background:#fff0b5;color:#9d6a00}.rank-pos.top2{background:#edf0f5;color:#6f7a89}.rank-pos.top3{background:#ffe6d0;color:#ae6635}
.player-cell{display:flex;align-items:center;min-width:0}.player-cell>span:last-child{min-width:0}.player-cell strong{display:block;font-size:11.5px;color:#26364d;overflow:hidden;text-overflow:ellipsis}.player-cell small{display:block;font-size:11px;color:#a0aab8;margin-top:2px;overflow:hidden;text-overflow:ellipsis}.class-tag{display:inline-flex;max-width:100%;align-items:center;gap:4px;padding:5px 6px;border-radius:8px;background:#f3f7fb;color:#60738a;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guild-tag{color:#718198;font-size:11px}.country-tag{display:inline-flex;align-items:center;gap:5px;min-width:0;color:#66778d;font-size:11px;font-weight:700}.country-flag{font-size:15px;line-height:1}.points-value{font-weight:900;color:#2a6eae}
.ranking-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:15px;border-top:1px solid #edf2f6}.ranking-pagination>button,.ranking-pagination #pageNumbers button{width:30px;height:30px;border-radius:9px;border:1px solid #e2eaf3;background:#fff;color:#75869b;font-size:11px;font-weight:800}.ranking-pagination #pageNumbers{display:flex;gap:6px}.ranking-pagination button:hover{border-color:#bed8f6;color:#1f7cf2}.ranking-pagination #pageNumbers button.active{background:#1f7cf2;border-color:#1f7cf2;color:#fff}

.player-search-hit{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.player-search-hit .hit-main{display:flex;align-items:center;gap:10px}.player-search-hit .hit-rank{font-size:11px;font-weight:900;color:#1f7cf2}.player-search-hit .hit-points{font-size:11px;color:#8d9aac}.empty-row{text-align:center!important;padding:28px!important;color:#9aa6b4!important}

@media(max-width:960px){
  .ranking-layout{grid-template-columns:220px minmax(0,1fr)}
  .ranking-table th:nth-child(2),.ranking-table td:nth-child(2){width:26%}
  .ranking-table th:nth-child(3),.ranking-table td:nth-child(3){width:20%}
  .ranking-table th:nth-child(6),.ranking-table td:nth-child(6){width:18%}
}
@media(max-width:820px){
  .ranking-layout{display:block}
  .ranking-sidebar{position:relative;top:auto;margin-bottom:14px}
  .ranking-side-nav{display:none}.ranking-sidebar.open .ranking-side-nav{display:block}
  .ranking-sidebar .side-head{display:none}
  .ranking-overview{padding:18px}
  .podium{grid-template-columns:1fr;align-items:stretch}.podium-card,.podium-card.first{min-height:0}
  .ranking-table th:nth-child(4),.ranking-table td:nth-child(4),.ranking-table th:nth-child(5),.ranking-table td:nth-child(5){display:none}
  .ranking-table th:nth-child(2),.ranking-table td:nth-child(2){width:31%}
  .ranking-table th:nth-child(3),.ranking-table td:nth-child(3){width:24%}
  .ranking-table th:nth-child(6),.ranking-table td:nth-child(6){width:24%}
}
@media(max-width:560px){
  .ranking-header{min-height:236px}
  .ranking-layout{width:calc(100% - 20px)}
  .ranking-inline-search{height:54px;padding-left:13px}.ranking-inline-search>button{height:42px;padding:0 14px}.ranking-inline-search input{font-size:13px}
  .table-headbar{padding-left:14px;padding-right:14px}
  .ranking-table thead th,.ranking-table tbody td{padding-left:6px;padding-right:6px}
  .ranking-table th:nth-child(3),.ranking-table td:nth-child(3){display:none}
  .ranking-table th:nth-child(2),.ranking-table td:nth-child(2){width:44%}
  .ranking-table th:nth-child(6),.ranking-table td:nth-child(6){width:29%}
  .ranking-table th:nth-child(7),.ranking-table td:nth-child(7){width:24%}
}

@media(min-width:681px){
  .ranking-eyebrow{font-size:13px}
  .ranking-inline-search input{font-size:14px}
  .podium-card strong{font-size:15px}
  .podium-card .podium-class,.podium-points{font-size:12px}
  .table-headbar strong{font-size:16px}
  .table-headbar span{font-size:12px}
  .ranking-table thead th{font-size:11px}
  .ranking-table tbody td{font-size:12.5px}
  .player-cell strong{font-size:12.5px}
  .player-cell small,.class-tag,.guild-tag,.country-tag{font-size:11.5px}
}
@media(max-width:560px){
  .ranking-layout{width:100%}
}