/* ── Tierlist page ── */
.tl-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ── Role tabs ── */
.tl-role-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tl-tab {
  padding: 10px 28px;
  border-radius: 8px;
  background: rgba(10,12,24,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.18s;
}
.tl-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
}
.tl-tab.active {
  color: #c8a43c;
  background: rgba(200,162,60,0.14);
  border-color: rgba(200,162,60,0.5);
}

/* ── Tier rows ── */
.tl-content { display: flex; flex-direction: column; gap: 10px; }

.tl-tier-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: rgba(10,12,24,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
  min-height: 80px;
}

.tl-tier-label {
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 14px 10px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.07);
  align-self: stretch;
}

.tl-tier-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  flex: 1;
  align-content: flex-start;
}

/* ── Champion card ── */
.tl-champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 8px;
  padding: 6px;
  transition: background 0.15s, transform 0.15s;
  width: 70px;
  text-decoration: none;
}
.tl-champ:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.tl-champ img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.12);
  transition: border-color 0.15s;
  display: block;
}
.tl-champ:hover img { border-color: rgba(200,162,60,0.6); }
.tl-champ-name {
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 1.2;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Tier color bands ── */
.tl-tier-row[data-tier="S+"] .tl-tier-label { background: rgba(232,160,32,0.18); color: #f0b030; }
.tl-tier-row[data-tier="S"]  .tl-tier-label { background: rgba(200,164,60,0.14); color: #c8a43c; }
.tl-tier-row[data-tier="A"]  .tl-tier-label { background: rgba(93,184,224,0.12); color: #5db8e0; }
.tl-tier-row[data-tier="B"]  .tl-tier-label { background: rgba(93,188,112,0.10); color: #5dbc70; }
.tl-tier-row[data-tier="C"]  .tl-tier-label { background: rgba(155,132,240,0.10); color: #9b84f0; }

/* ── Empty row ── */
.tl-tier-row.tl-empty { display: none; }

/* ── Loading / error ── */
.loading { color: rgba(255,255,255,0.4); padding: 40px; text-align: center; font-size: 0.9rem; }

/* ── Patch badge ── */
.tl-patch-badge {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  letter-spacing: 0.06em;
}

@media(max-width:600px) {
  .tl-tab { padding: 8px 14px; font-size: 0.75rem; }
  .tl-tier-label { min-width: 52px; font-size: 1.1rem; padding: 10px 6px; }
  .tl-champ { width: 58px; }
  .tl-champ img { width: 44px; height: 44px; }
}