.portal-league-real,
.portal-trophy-real {
  padding: clamp(18px,3vw,40px);
  color: #e9f2f4;
  font-family: Rajdhani,system-ui,sans-serif;
}

.pl-hero,
.pt-hero {
  padding: clamp(25px,4vw,48px);
  border: 1px solid #244653;
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 0%,rgba(140,86,255,.18),transparent 38%),
    linear-gradient(145deg,#091b28,#07111c);
}

.pl-hero > span,
.pt-hero > span {
  color: #59dce9;
  font: 900 .56rem Orbitron,sans-serif;
  letter-spacing: .12em;
}

.pl-hero h1,
.pt-hero h1 {
  margin: 10px 0;
  font: 900 clamp(2rem,5vw,4.5rem)/.95 Orbitron,sans-serif;
}

.pl-hero h1 b,
.pt-hero h1 b {
  color: #ffd750;
}

.pl-hero p,
.pt-hero p {
  color: #8297a0;
  font-weight: 700;
}

.pl-regions {
  margin: 13px 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}

.pl-regions button {
  min-height: 94px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #203b46;
  border-radius: 12px;
  background: #071820;
  color: #e0ebee;
  cursor: pointer;
}

.pl-regions button.active {
  border-color: #5bdce9;
  box-shadow: inset 0 -3px #5bdce9;
}

.pl-regions small {
  color: #6d848e;
}

.pl-regions strong {
  margin-top: 5px;
  color: #5bdce9;
  font: 900 .8rem Orbitron,sans-serif;
}

.pl-regions span {
  margin-top: auto;
  color: #82949b;
  font-size: .65rem;
}

.pl-stage {
  padding: 18px;
  border: 1px solid #203b46;
  border-radius: 18px;
  background: linear-gradient(145deg,#071820,#050e14);
}

.pl-stage > header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.pl-stage h2 {
  margin: 5px 0;
  font: 900 1.5rem Orbitron,sans-serif;
}

.pl-status {
  color: #ffd552;
  font: 900 .55rem Orbitron,sans-serif;
}

.pl-members {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 8px;
}

.pl-member {
  min-height: 120px;
  padding: 12px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  border: 1px solid #203843;
  border-radius: 11px;
  background: #06151c;
}

.pl-member > span {
  color: #5bdce9;
  font: 900 .5rem Orbitron,sans-serif;
}

.pl-member small {
  color: #718691;
}

.pl-member strong {
  display: block;
  margin-top: 4px;
  font: 900 .65rem Orbitron,sans-serif;
}

.pl-member > b {
  grid-column: 1/-1;
  margin-top: auto;
  color: #ffd552;
  font: 900 .45rem Orbitron,sans-serif;
}

.pl-actions {
  margin-top: 15px;
  display: flex;
  gap: 8px;
}

.pl-actions button,
.pl-actions a {
  min-height: 40px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #28505d;
  border-radius: 9px;
  background: #071a22;
  color: #60dce9;
  text-decoration: none;
  font: 900 .5rem Orbitron,sans-serif;
}

.pl-actions button:not(:disabled) {
  background: #5bdce9;
  color: #061016;
}

.pl-pending {
  margin-top: 15px;
  padding: 13px;
  border: 1px solid #514482;
  border-radius: 10px;
  color: #a99cff;
}

.pt-user {
  margin-top: 15px;
  color: #dfeaed;
  font: 900 .62rem Orbitron,sans-serif;
}

.pt-stats {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 8px;
}

.pt-stats > div {
  padding: 12px;
  border: 1px solid #264653;
  border-radius: 10px;
  background: #06151d;
}

.pt-stats strong {
  display: block;
  color: #ffd651;
  font: 900 1rem Orbitron,sans-serif;
}

.pt-stats span {
  color: #71858f;
  font: 900 .4rem Orbitron,sans-serif;
}

.pt-filter {
  margin: 13px 0;
  display: flex;
  gap: 6px;
}

.pt-filter button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #29434f;
  border-radius: 999px;
  background: #071720;
  color: #8297a1;
  font: 900 .45rem Orbitron,sans-serif;
}

.pt-filter button.active {
  background: #59dce9;
  color: #061016;
}

.pt-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 9px;
}

.pt-card {
  min-height: 290px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  border: 1px solid #203a45;
  border-radius: 13px;
  background: linear-gradient(145deg,#09192a,#07111c);
}

.pt-card.claimable {
  border-color: #d0a53b;
}

.pt-card.locked {
  opacity: .68;
}

.pt-card header {
  display: flex;
  justify-content: space-between;
  color: #5bdce9;
  font-size: .55rem;
}

.pt-icon {
  margin-top: 20px;
  font-size: 2rem;
}

.pt-card h3 {
  margin: 10px 0 5px;
  font: 900 .68rem Orbitron,sans-serif;
}

.pt-card p {
  color: #80949e;
}

.pt-bar {
  height: 6px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 99px;
  background: #041118;
}

.pt-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#58dce9,#976cff);
}

.pt-card > small {
  margin-top: 6px;
  color: #748a94;
}

.pt-card > button {
  min-height: 36px;
  margin-top: 10px;
  border: 0;
  border-radius: 8px;
  background: #ffd651;
  color: #071016;
  font: 900 .45rem Orbitron,sans-serif;
}

.pt-card footer {
  margin-top: 10px;
  color: #61dea9;
  font: 900 .44rem Orbitron,sans-serif;
}

.portal-feature-loading {
  padding: 120px 20px;
  text-align: center;
  color: #5bdce9;
  font: 900 .65rem Orbitron,sans-serif;
}

@media(max-width:900px) {
  .pl-regions,
  .pt-stats {
    grid-template-columns: repeat(2,1fr);
  }

  .pt-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media(max-width:560px) {
  .pt-grid {
    grid-template-columns: 1fr;
  }
}