/* =========================================================
   RANKINGS FOCUS STATES
   ========================================================= */
.rankings-page .toolbar input:focus-visible,
.rankings-page .toolbar select:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
}
.rankings-page .search-wrap{
  transition:border-color .15s ease,box-shadow .15s ease;
}
.rankings-page .search-wrap:focus-within{
  border-color:#3a6651;
  box-shadow:0 0 0 3px rgba(50,213,131,.08);
}
.rankings-page .table-card{
  transition:border-color .15s ease;
}
.rankings-page .row.player-row{
  cursor:pointer;
}
.rankings-page .row.player-row:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:-2px;
}

/* =========================================================
   RANKINGS THEME
   ========================================================= */
:root{
  --bg:#0b0d12; --panel:#11141b; --panel2:#171b23; --border:#252b35;
  --text:#f4f6f8; --muted:#8992a0; --accent:#32d583; --accent2:#6ee7a5;
  --gold:#f2c94c; --purple:#32d583; --danger:#ff6678;
  --bg:#0b0d12;
  --panel:#11141b;
  --panel2:#171b23;
  --border:#252b35;
  --text:#f4f6f8;
  --muted:#8992a0;
  --accent:#32d583;
  --accent2:#6ee7a5;
  --gold:#f2c94c;
  --purple:#32d583;
  --danger:#ff6678;
  --bg:#0b1119;
  --panel:#101823;
  --panel2:#151e2b;
  --border:#1f2b3b;
  --muted:#74849a;
  --text:#e8edf4;
  --accent:#f0c44f;
  --accent2:#dce5ef;
}
body{
  background:
    radial-gradient(circle at 50% -35%,rgba(38,58,86,.24),transparent 48%),
    linear-gradient(180deg,#0b1119 0%,#0b1119 55%,#080d14 100%);
  zoom:1.4;
}
.topbar{
  height:64px;
  padding:0 max(16px,calc((100% - 1180px)/2));
  gap:28px;
  background:rgba(10,16,24,.94);
  border-bottom:1px solid #172332;
}
.brand{gap:9px;letter-spacing:.5px}
.brand-logo{width:112px;height:42px;object-fit:contain}
.brand>span:last-child{display:none}
.topbar nav{gap:2px}
.topbar nav a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
}
.topbar nav a::before{content:"";display:inline-grid;place-items:center;width:17px;height:17px;color:#73839a;font-size:14px}
.topbar nav a[href*="rankings"]::before{content:"♜"}
.topbar nav a[href*="information"]::before{content:"ⓘ"}
.topbar nav a[href="#discord"]::before{content:"◎"}
.topbar nav a[href="#docs"]::before{content:"▤"}
.topbar nav a:hover,.topbar nav a.active{background:#141d29;color:#eef2f7}

.topbar > .search-wrap{
  order:3;
  flex:0 0 245px;
  height:38px;
  min-width:0;
  padding:0 10px;
  border-radius:8px;
  background:#101823;
  border-color:#1d2938;
}
.topbar > .search-wrap input{height:36px;font-size:12px}
.topbar > .search-wrap > span{font-size:17px}
.topbar > .search-wrap kbd{display:none}
.topbar > .search-wrap .search-results{top:calc(100% + 7px);max-height:360px}

main.rankings-page{
  width:min(1180px,calc(100% - 32px));
  padding:22px 0 60px;
}
.info-strip{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:0 13px;
  margin:11px 0 10px;
  border:1px solid #1b2736;
  border-radius:8px;
  background:#0f1722;
  color:#8291a5;
  font-size:11px;
}
.info-strip-left{display:flex;align-items:center;gap:9px;min-width:0}
.info-strip strong{color:#b9c4d1;font-size:11px}
.info-strip code{font-family:inherit;color:#aebbc9;font-weight:700}
.info-label{font-size:9px;letter-spacing:1.2px;font-weight:800;color:#5f7086}

.toolbar{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin:0 0 10px;
}
.toolbar .search-wrap{display:none}
.toolbar select{
  height:34px;
  min-width:130px;
  padding:0 10px;
  border-radius:7px;
  background:#101823;
  border-color:#1d2938;
  color:#91a0b3;
  font-size:11px;
}
.table-card{
  border:1px solid #1b2736;
  border-radius:8px;
  background:#0e1621;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.table-card.overall-active{
  overflow:visible;
}
.table-card.overall-active .overall-ranking-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  padding:4px;
}
.table-card.overall-active .row{
  min-height:74px;
  padding:0 14px;
  background:#121b28;
  border:1px solid #1e2c40;
  border-radius:10px;
  position:relative;
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease,border-radius .15s ease;
}
.table-card.overall-active .row:hover{
  background:#182433;
  border-radius:10px;
  box-shadow:0 0 0 2px #49617e,0 10px 26px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(-2px) scale(1.012);
  z-index:2;
  overflow:visible;
}
.table-card.overall-active .row .rank-plate{
  height:62px;
  min-width:142px;
  align-self:center;
  margin-left:-14px;
  padding:0 9px 0 13px;
  border-radius:0 8px 8px 0;
  gap:5px;
  overflow:visible;
}
.table-card.overall-active .row .rank-num{font-size:23px}
.table-card.overall-active .row .rank-plate .avatar{width:56px;height:56px;margin:0 -9px 0 4px;border-radius:6px}
.table-card.overall-active .row .player-info{gap:3px}
.table-card.overall-active .row .player-info .name{font-size:14px;font-weight:800}
.table-card.overall-active .row .player-info .sub{font-size:11px;font-weight:500}
.table-card.overall-active .points{font-size:12px;color:#8c9bae;padding-right:0}

/* Plates */
.table-card.overall-active .row.rank-gold .rank-plate{
  background:linear-gradient(90deg,#f3cf45 0%,#efc23b 70%,#d7a82d 100%);
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}
.table-card.overall-active .row.rank-silver .rank-plate{
  background:linear-gradient(90deg,#b9d0da 0%,#94b3c2 70%,#6e8f9f 100%);
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}
.table-card.overall-active .row.rank-bronze .rank-plate{
  background:linear-gradient(90deg,#cc742d 0%,#ad5a22 70%,#824116 100%);
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}
.table-card.overall-active .row.rank-default .rank-plate{
  background:linear-gradient(90deg,#2a3444 0%,#252f3e 70%,#202938 100%);
  clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
}
.table-card.overall-active .row.rank-gold .rank-num,
.table-card.overall-active .row.rank-silver .rank-num,
.table-card.overall-active .row.rank-bronze .rank-num{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}

.overall-tier-cell{padding:0 3px}
.overall-tiers{gap:3px}
.overall-tier-item{gap:1px}
.overall-kit-icon{width:27px;height:27px;border-radius:50%;background:#0c141e;border-color:#263447}
.overall-kit-icon .kit-icon-img{width:21px;height:21px}
.overall-tier-item .tier{width:30px;height:18px;font-size:9px;border-radius:4px;letter-spacing:normal}
.overall-unranked{width:34px;height:19px;font-size:10px;background:#1c2634}
.table-card.overall-active .overall-tier-item .tier,
.table-card.overall-active .overall-unranked{
  background:#0c141e;
  box-shadow:inset 0 0 0 1px #263447;
}

.table-card:not(.overall-active){background:#0e1621}
.mode-board-wrap{padding:12px}
.mode-board-topbar{margin-bottom:10px;padding:0 3px 4px}
.mode-board-heading .mode-board-icon{width:34px;height:34px;border-radius:8px;background:#121c29;border-color:#273548}
.mode-board-heading strong{font-size:14px}
.mode-board-heading span:not(.mode-board-icon){font-size:10px}
.mode-board{gap:6px}
.mode-tier-column{border-color:#1b2736;border-radius:0;background:#101823}
.mode-tier-header{min-height:44px;padding:0 10px;background:#172131!important;color:#c2ccd8!important;border-bottom-color:#263447}
.mode-tier-header strong{font-size:13px}
.mode-tier-count{background:#111a27;color:#8e9daf}
.mode-board-player{min-height:48px;padding:5px 7px;background:#151f2d!important;border-top-color:#1d2a3a;border-radius:0}
.mode-board-player:hover{background:#1b2838!important}
.table-card:not(.overall-active) .mode-board-player.mode-board-high{background:#263346!important}
.table-card:not(.overall-active) .mode-board-player.mode-board-mid{background:#1d2939!important}
.table-card:not(.overall-active) .mode-board-player.mode-board-low{background:#141d29!important}
.mode-board-avatar{width:32px;height:32px;border-radius:4px}
.mode-board-arrows{color:#5d708c!important}

footer{padding:28px max(16px,calc((100% - 1180px)/2));background:#0a1119;border-top-color:#172332}

@media(max-width:900px){
  .topbar{gap:10px}
  .topbar nav{flex:1}
  .topbar > .search-wrap{flex-basis:190px}
  .table-card.overall-active .row{min-width:920px}
}
@media(max-width:750px){
  .topbar{height:60px;padding:0 12px}
  .brand-logo{width:80px;height:33px}
  .topbar nav{display:none}
  .topbar > .search-wrap{flex:1 1 auto;max-width:220px;margin-left:auto}
  main.rankings-page{width:calc(100% - 20px);padding-top:14px}
  .info-strip{padding:0 9px}
  .info-strip-left .info-label{display:none}
  .toolbar{justify-content:stretch}
  .toolbar select{flex:1;min-width:0}
  .table-card.overall-active .row{min-width:900px}
}