.ranking-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ranking-hero{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(125,211,252,.12), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(245,158,11,.12), transparent 28%),
    linear-gradient(180deg, rgba(17,28,72,.97), rgba(11,18,47,.98));
}

.ranking-hero-copy{
  min-width:0;
  padding:4px 0;
}

.ranking-kicker{
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
  color:var(--accent2);
  text-transform:uppercase;
  margin-bottom:7px;
}

.ranking-title{
  margin:0;
  font-size:38px;
  line-height:1;
  font-weight:950;
  letter-spacing:.2px;
}

.ranking-sub{
  margin:10px 0 0 0;
  max-width:620px;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.ranking-own-card{
  flex:0 0 250px;
  min-width:250px;
  border-radius:16px;
  border:1px solid rgba(245,158,11,.34);
  background:
    radial-gradient(circle at 82% 18%, rgba(255,211,111,.13), transparent 38%),
    linear-gradient(180deg, rgba(73,47,11,.50), rgba(30,24,32,.72));
  padding:14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.16);
}

.ranking-own-label{
  font-size:10px;
  font-weight:950;
  color:#ffd978;
  letter-spacing:.13em;
}

.ranking-admin-title{
  margin-top:7px;
  font-size:20px;
  font-weight:950;
  color:#fff2c5;
}

.ranking-own-rank{
  margin-top:4px;
  font-size:34px;
  font-weight:950;
  line-height:1;
  color:#fff5cf;
  text-shadow:0 0 18px rgba(245,158,11,.20);
}

.ranking-own-points{
  margin-top:8px;
  font-size:18px;
  font-weight:950;
  color:#fff;
}

.ranking-own-points span{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}

.ranking-own-gap{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#f4e7c0;
  font-size:11px;
  line-height:1.4;
  font-weight:750;
}

.ranking-own-gap-lead{
  color:#bfffd1;
}

.ranking-controls-card{
  padding:13px 15px;
}

.ranking-controls-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.ranking-section-title{
  font-size:16px;
  font-weight:950;
}

.ranking-section-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.ranking-score-version{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.20);
  background:rgba(125,211,252,.06);
  color:#c9f1ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}

.ranking-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.ranking-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:10px;
  border:1px solid rgba(78,101,184,.58);
  background:rgba(18,29,70,.72);
  color:var(--text);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  transition:transform .14s ease,border-color .14s ease,background .14s ease;
}

.ranking-tab:hover{
  text-decoration:none;
  transform:translateY(-1px);
  border-color:rgba(125,211,252,.42);
}

.ranking-tab.active{
  border-color:rgba(245,158,11,.52);
  background:linear-gradient(180deg,rgba(111,63,16,.66),rgba(65,39,17,.72));
  color:#fff2c5;
  box-shadow:0 0 0 1px rgba(245,158,11,.08) inset;
}

.ranking-table-card{
  padding:10px;
  overflow:hidden;
}

.ranking-table-wrap{
  width:100%;
  overflow-x:auto;
}

.ranking-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 6px;
  min-width:720px;
}

.ranking-table thead th{
  padding:7px 12px;
  color:var(--muted);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:left;
}

.ranking-table thead th.ranking-number{
  text-align:right;
}

.ranking-row td{
  padding:11px 12px;
  background:rgba(12,21,53,.76);
  border-top:1px solid rgba(57,78,145,.38);
  border-bottom:1px solid rgba(57,78,145,.38);
}

.ranking-row td:first-child{
  border-left:1px solid rgba(57,78,145,.38);
  border-radius:13px 0 0 13px;
}

.ranking-row td:last-child{
  border-right:1px solid rgba(57,78,145,.38);
  border-radius:0 13px 13px 0;
}

.ranking-row.current td{
  background:
    linear-gradient(180deg,rgba(32,64,103,.78),rgba(14,36,67,.82));
  border-top-color:rgba(99,255,155,.52);
  border-bottom-color:rgba(99,255,155,.52);
}

.ranking-row.current td:first-child{
  border-left-color:rgba(99,255,155,.52);
  box-shadow:-2px 0 0 rgba(99,255,155,.12);
}

.ranking-row.current td:last-child{
  border-right-color:rgba(99,255,155,.52);
}

.ranking-col-rank{
  width:76px;
}

.ranking-rank-cell{
  width:76px;
}

.ranking-medal{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:13px;
  font-weight:950;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}

.ranking-medal.gold{
  background:linear-gradient(180deg,#ffd56f,#91620c);
  color:#271700;
  box-shadow:0 0 15px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.4);
}

.ranking-medal.silver{
  background:linear-gradient(180deg,#e8edf6,#77849b);
  color:#162033;
}

.ranking-medal.bronze{
  background:linear-gradient(180deg,#e2a06b,#7e4324);
  color:#2a1307;
}

.ranking-rank-number{
  color:#b7c4e8;
  font-size:13px;
  font-weight:950;
}

.ranking-commander-name{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:950;
  color:#fff;
}

.ranking-you{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(99,255,155,.34);
  background:rgba(44,166,94,.12);
  color:#bdffd2;
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
}

.ranking-number{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:#dfe7ff;
  font-size:13px;
  font-weight:850;
}

.ranking-total-cell{
  color:#fff2c5;
  font-weight:950;
}

.ranking-outside-top{
  margin:10px 4px 4px;
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(125,211,252,.30);
  background:rgba(125,211,252,.05);
}

.ranking-outside-label{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.08em;
}

.ranking-outside-row{
  margin-top:8px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  font-size:13px;
}

.ranking-empty{
  padding:28px 16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

.ranking-info-card{
  padding:15px;
}

.ranking-info-title{
  font-size:15px;
  font-weight:950;
  margin-bottom:11px;
}

.ranking-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.ranking-info-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  padding:11px;
  border-radius:13px;
  border:1px solid rgba(55,76,142,.38);
  background:rgba(12,21,53,.48);
}

.ranking-info-icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(125,211,252,.18);
  background:rgba(125,211,252,.07);
  color:#aeeaff;
  font-size:10px;
  font-weight:950;
}

.ranking-info-item b{
  display:block;
  color:#fff;
  font-size:12px;
  margin-bottom:3px;
}

.ranking-info-item span{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

@media (max-width:760px){
  .ranking-hero{
    flex-direction:column;
  }

  .ranking-own-card{
    flex:0 0 auto;
    min-width:0;
    width:100%;
  }

  .ranking-info-grid{
    grid-template-columns:1fr;
  }

  .ranking-title{
    font-size:32px;
  }
}

@media (max-width:640px){
  .ranking-table{
    min-width:0;
    border-spacing:0;
  }

  .ranking-table thead{
    display:none;
  }

  .ranking-table,
  .ranking-table tbody,
  .ranking-table tr,
  .ranking-table td{
    display:block;
    width:100%;
  }

  .ranking-row{
    margin-bottom:9px;
    border:1px solid rgba(57,78,145,.42);
    border-radius:14px;
    overflow:hidden;
    background:rgba(12,21,53,.72);
  }

  .ranking-row.current{
    border-color:rgba(99,255,155,.48);
  }

  .ranking-row td,
  .ranking-row.current td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:8px 11px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.05);
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .ranking-row td:last-child{
    border-bottom:0;
  }

  .ranking-row td::before{
    content:attr(data-label);
    flex:0 0 auto;
    color:var(--muted);
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
  }

  .ranking-rank-cell,
  .ranking-commander-cell{
    width:100%;
  }

  .ranking-commander-cell{
    min-height:44px;
  }

  .ranking-commander-cell::before{
    align-self:center;
  }

  .ranking-number{
    text-align:right;
  }

  .ranking-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ranking-tab{
    width:100%;
  }
}

/* Runde Commander-Profilbilder */
.ranking-commander-identity{display:flex;align-items:center;gap:9px;min-width:0;font-weight:950}
.ranking-avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;overflow:hidden;border:2px solid rgba(125,161,255,.38);border-radius:50%;background:#071027;color:#edf4ff;font-size:9px;font-weight:950;box-shadow:0 0 12px rgba(74,119,255,.10)}
.ranking-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.ranking-avatar.rarity-uncommon{border-color:#5eead4}.ranking-avatar.rarity-rare{border-color:#60a5fa}.ranking-avatar.rarity-epic{border-color:#c084fc}.ranking-avatar.rarity-legendary{border-color:#f59e0b}.ranking-avatar.rarity-mythic{border-color:#ff6bd6;box-shadow:0 0 14px rgba(255,107,214,.24)}
.ranking-outside-row>.ranking-commander-identity{font-size:12px}
@media(max-width:640px){.ranking-commander-identity{justify-content:flex-end}.ranking-avatar{width:34px;height:34px;flex-basis:34px}}