/* =========================================================
   TOP BAR
   ========================================================= */

.topbar{
  height:72px;
  border-bottom:1px solid var(--border);
  background:rgba(11,13,18,.86);
  backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  padding:0 max(24px,calc((100% - 1180px)/2));
  gap:42px;
  position:sticky;
  top:0;
  z-index:10;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.8px;
}

.brand>span:last-child span{
  color:var(--accent2);
}

nav{
  display:flex;
  gap:8px;
  flex:1;
}

nav a{
  padding:10px 13px;
  color:var(--muted);
  font-size:14px;
  border-radius:8px;
}

nav a:hover,
nav a.active{
  color:var(--text);
  background:var(--panel2);
}

.mobile-menu{
  display:none;
  background:none;
  border:0;
  color:white;
  font-size:22px;
}

/* =========================================================
   MAIN / HERO
   ========================================================= */

main{
  width:min(1180px,calc(100% - 40px));
  margin:auto;
  padding:60px 0 80px;
}

.eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--accent2);
  margin:0 0 10px;
}

h1{
  font-size:42px;
  line-height:1.05;
  margin:0 0 10px;
  letter-spacing:-1.5px;
}

.subtitle{
  color:var(--muted);
  margin:0;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.toolbar{
  display:flex;
  gap:10px;
  margin:22px 0;
}

.search-wrap{
  flex:1;
  display:flex;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 12px;
  gap:9px;
  color:var(--muted);
}

.search-wrap input{
  width:100%;
  background:none;
  border:0;
  outline:0;
  color:var(--text);
  height:44px;
  font:inherit;
}

kbd{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:5px;
  padding:2px 7px;
  font-size:12px;
}

select{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 14px;
  outline:none;
}

/* =========================================================
   STANDARD TABLE
   ========================================================= */

.table-card{
  border:1px solid var(--border);
  border-radius:13px;
  overflow:hidden;
  background:rgba(17,20,27,.86);
  box-shadow:0 20px 60px #00000025;
}

.row{
  display:grid;
  grid-template-columns:70px minmax(240px,1fr) 120px 110px;
  align-items:center;
  min-height:70px;
  padding:0 20px;
  border-top:1px solid var(--border);
  transition:.15s;
}

.row:hover{
  background:#171b23;
}

.rank{
  color:#667080;
  font-weight:700;
}

.player{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.avatar{
  width:38px;
  height:38px;
  border-radius:7px;
  image-rendering:auto;
  background:#202530;
  object-fit:cover;
}

.name{
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sub{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
}

/* =========================================================
   TIER BADGES
   ========================================================= */

.tier{
  display:inline-flex;
  width:47px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  font-weight:800;
  font-size:12px;
}

.tier.HT1{
  background:#1c2634;
  color:#ffcf4a;
}

.tier.MT1{
  background:#1c2634;
  color:#ffa500;
}

.tier.LT1{
  background:#1c2634;
  color:#d5b355;
}

.tier.HT2{
  background:#1c2634;
  color:#a4b3c7;
}

.tier.MT2{
  background:#1c2634;
  color:#7a9fbf;
}

.tier.LT2{
  background:#1c2634;
  color:#888d95;
}

.tier.HT3{
  background:#1c2634;
  color:#dd8849;
}

.tier.MT3{
  background:#1c2634;
  color:#c9633f;
}

.tier.LT3{
  background:#1c2634;
  color:#b36830;
}

.tier.HT4{
  background:#1c2634;
  color:#a2d6ff;
}

.tier.MT4{
  background:#1c2634;
  color:#6ab8ff;
}

.tier.LT4{
  background:#1c2634;
  color:#5c9fe6;
}

.tier.HT5{
  background:#1c2634;
  color:#7cc3ff;
}

.tier.MT5{
  background:#1c2634;
  color:#6ab8ff;
}

.tier.LT5{
  background:#1c2634;
  color:#a2d6ff;
}

/* =========================================================
   RETIRED RANKS
   ========================================================= */

.tier.retired{
  filter:saturate(.35) brightness(.55);
  opacity:.72;
}

.overall-kit-icon.retired{
  opacity:.48;
  filter:saturate(.35) brightness(.65);
}

.overall-tier-item.overall-retired{
  opacity:.86;
}

.profile-tier-retired{
  opacity:.72;
}

.profile-tier-icon.retired{
  opacity:.48;
  filter:saturate(.25) brightness(.55);
}

.profile-tier-retired .tier.retired{
  filter:saturate(.2) brightness(.48);
  opacity:.78;
}

/* =========================================================
   UNRANKED
   ========================================================= */

.unranked{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 9px;
  border-radius:7px;
  background:#202530;
  color:#8992a0;
  font-size:12px;
  font-weight:700;
}

/* =========================================================
   KIT ICONS
   ========================================================= */

.kit-icon-img{
  width:20px;
  height:20px;
  object-fit:contain;
  vertical-align:middle;
}