.league-focus {
  max-width: 1000px;
  margin: auto;
}
.league-focus > .back {
  margin-bottom: 14px;
}
.league-focus .heading {
  margin-bottom: 14px;
  gap: 12px;
}
.league-focus .rsl-title {
  gap: 13px;
  align-items: center;
}
.league-focus .rsl-title > img {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 4px 6px #0005);
}
.league-focus .heading h1 {
  font-size: 25px;
  line-height: 1.15;
  margin: 5px 0;
  overflow-wrap: anywhere;
}
.league-focus .eyebrow {
  font-size: 9px;
  letter-spacing: 1px;
}
.league-mini-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.league-mini-stats > span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid #365774;
  border-radius: 10px;
  background: #18314a;
  font-size: 10px;
  color: #b7cde1;
}
.league-mini-stats svg {
  width: 17px;
  height: 17px;
  color: #ffcc84;
}
.league-mini-stats b {
  color: #eff7ff;
}
.league-focus .division-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.league-focus .division-bar input {
  grid-column: 1/-1;
  width: 100%;
  margin: 0;
  min-height: 42px;
}
.league-focus .division-bar select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}
.league-focus .division-bar label {
  font-size: 11px;
}
.league-focus .tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  overflow: visible;
  padding: 0;
  border: 0;
  margin: 0 0 16px;
}
.league-focus .tabs .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 46px;
  padding: 9px 5px;
  white-space: normal;
  border: 1px solid #385e7c;
  border-radius: 10px;
  background: linear-gradient(145deg, #203e59, #10283f);
  font-size: 11px;
}
.league-focus .tabs .tab svg {
  width: 19px;
  height: 19px;
  color: #92cbe7;
}
.league-focus .tabs .tab.active {
  background: linear-gradient(#ffda8a, #ffb346);
  border-color: #ffe4ae;
  color: #34220c;
  box-shadow: 0 3px #a95c14;
}
.league-focus .tabs .tab.active svg {
  color: #775015;
}
.league-focus .section-title {
  display: block;
}
.league-focus .section-title > .tabs {
  margin-bottom: 10px;
}
.league-focus .section-title > span {
  display: none;
}
.league-ranking,
.league-stat-list {
  padding: 0 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.league-rank,
.league-stat-row {
  border: 1px solid #436784;
  border-radius: 12px;
  background: linear-gradient(135deg, #244761, #152c44);
  box-shadow:
    inset 0 1px #acdfff22,
    0 3px #050f21;
  overflow: hidden;
}
.league-rank summary,
.league-stat-row summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  cursor: pointer;
  list-style: none;
  min-height: 68px;
}
.league-rank summary::-webkit-details-marker,
.league-stat-row summary::-webkit-details-marker {
  display: none;
}
.rank-place {
  min-width: 19px;
  font-size: 15px;
  font-weight: 900;
  color: #91b9d1;
  text-align: center;
}
.rank-first {
  border-color: #b58a48;
  background: linear-gradient(115deg, #5c4528, #243c4f);
}
.rank-first .rank-place {
  color: #ffcf81;
}
.league-rank summary > svg,
.league-rank summary > img,
.league-stat-row summary > svg,
.league-stat-row summary > img {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.rank-name {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.rank-name small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #9fbad0;
  margin-top: 4px;
}
.rank-points {
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  min-width: 36px;
  color: #ffd18a;
}
.rank-points small {
  display: block;
  font-size: 8px;
  font-weight: 600;
  color: #aac1d4;
  margin-top: 3px;
}
.rank-chevron {
  color: #7facc9;
  font-size: 13px;
}
.rank-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid #46647b;
  padding: 13px;
  background: #0c2034;
}
.rank-more > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #9fbad0;
}
.rank-more b {
  color: #e5f4ff;
}
.rank-more > a {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid #3c6c8c;
  border-radius: 7px;
  color: #75dcff;
  font-size: 12px;
}
.rank-more > a svg {
  width: 16px;
  height: 16px;
}
.league-team-apps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.league-team-app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 13px;
  padding: 18px 10px;
  min-height: 145px;
  border: 1px solid #406784;
  border-radius: 15px;
  background: radial-gradient(ellipse at top, #2d5470, #11273e);
  box-shadow: 0 3px #030f21;
  text-align: center;
}
.league-team-app > svg,
.league-team-app > img {
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}
.league-team-app b {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.league-fixtures {
  padding: 0 10px 12px;
}
.league-source {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #2c4963;
  border-radius: 10px;
  font-size: 11px;
  color: #a8bdd3;
}
.league-source > summary {
  cursor: pointer;
  min-height: 24px;
}
.league-source p {
  font-size: 12px;
  line-height: 1.6;
}
.league-source .source-note {
  margin: 10px 0;
}
.league-source .button {
  margin-top: 10px;
}
.league-focus .stats-sort {
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 12px;
}
.league-columns {
  display: block !important;
}
.league-focus .stats {
  margin-bottom: 18px;
}
.league-focus .stat {
  padding: 12px;
}
.league-focus .stat b {
  font-size: 19px;
}
.league-focus .stat span {
  font-size: 10px;
}
@media (max-width: 600px) {
  .league-focus .heading h1 {
    font-size: 21px;
  }
  .league-focus .rsl-title > img {
    width: 46px;
    height: 46px;
  }
  .league-focus .eyebrow {
    font-size: 8px;
  }
  .league-focus .tabs .tab {
    font-size: 10px;
    gap: 5px;
  }
  .league-mini-stats {
    gap: 5px;
  }
  .league-mini-stats > span {
    font-size: 9px;
    padding: 7px;
  }
  .league-team-apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rank-name {
    font-size: 12px;
  }
  .league-rank summary,
  .league-stat-row summary {
    gap: 7px;
    padding: 10px 8px;
  }
  .rank-points {
    font-size: 18px;
  }
  .league-focus .panel-head {
    padding: 14px;
  }
  .league-focus .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ranking-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  font-size: 10px;
}
.ranking-legend small {
  width: 100%;
  color: #9bb8cc;
}
.ranking-legend .up {
  color: #84e1bd;
}
.ranking-legend .down {
  color: #ffafa3;
}
.league-rank.promote {
  border-left: 4px solid #61d4a4;
}
.league-rank.relegate {
  border-left: 4px solid #f38676;
}
.league-rank.promote .rank-place {
  color: #84e1bd;
}
.league-rank.relegate .rank-place {
  color: #ffafa3;
}
.ranking-settings {
  margin-top: 20px;
}
.ranking-settings h3 {
  margin-bottom: 16px;
}
/* Compact league navigation and organizer app tiles. */
.league-focus .rsl-tabs {display:flex;overflow:visible;gap:4px;padding-bottom:5px;flex-wrap:wrap}
.league-focus .rsl-tabs .tab {flex:0 0 auto;min-height:36px;padding:6px 10px;white-space:nowrap;font-size:11px;gap:5px;border-radius:7px}
.league-focus .rsl-tabs .tab svg {width:15px;height:15px}
@media (max-width: 600px) {
  .league-focus .rsl-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .league-focus .rsl-tabs .tab {min-width:0;min-height:42px;padding:6px 4px;justify-content:center}
}
.clan-logo-editor form {padding:12px 0;max-width:360px}
.clan-logo-editor input {max-width:100%;min-width:0}
.league-stat-row summary {min-height:46px;padding:6px 9px;gap:8px}
.league-stat-row summary>svg,.league-stat-row summary>img {width:28px;height:28px;max-width:28px;max-height:28px}
.league-stat-row .rank-name small {margin-top:2px}
.league-stat-row .rank-points {font-size:17px}
.league-stat-list {gap:5px}
.simulation-notice {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:1px solid #856839;background:#332d22;color:#ffda93;border-radius:9px;padding:8px 12px;font-size:11px;margin:8px 0 12px}
.simulation-notice .button {font-size:10px;min-height:30px;padding:5px 8px}
.league-welcome p {margin:12px 0;line-height:1.6}
.fixture-stream-link {margin:0 10px 12px;font-size:12px}

/* Reuse the same glass clan cards as the Teams page. */
.league-team-apps.compact-squad-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
  gap: 14px;
}
.league-team-app.squad-card.compact-squad-card {
  aspect-ratio: 1;
  min-height: 160px;
  padding: 0;
}
.league-team-app.compact-squad-card > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  opacity: .72;
  z-index: -2;
}
@media (max-width: 500px) {
  .league-team-apps.compact-squad-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .league-team-app.squad-card.compact-squad-card { min-height: 140px; }
}
