* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #100b19;
  color: #f4edff;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 6%;
  background: #1c1229;
  border-bottom: 1px solid #38234f;
  font-weight: bold;
}

header b {
  color: #d7adff;
  font-size: 20px;
}

.online {
  color: #62e6a5;
}

.offline {
  color: #ff8585;
}

main {
  width: 90%;
  max-width: 1150px;
  margin: 35px auto;
}

.hero {
  padding: 55px 35px;
  border-radius: 22px;
  background: linear-gradient(135deg, #382052, #191126);
  border: 1px solid #65418b;
  margin-bottom: 25px;
}

.hero small,
.profile-identity small {
  color: #c69bfa;
  letter-spacing: 2px;
}

.hero h1 {
  font-size: clamp(32px, 5vw, 55px);
  line-height: 1.15;
  margin: 18px 0;
}

.hero p {
  color: #c8bdd8;
}

a {
  color: #d6a5ff;
}

.hero a {
  display: inline-block;
  margin-top: 12px;
  padding: 11px 18px;
  background: #8747d8;
  color: white;
  border-radius: 9px;
  text-decoration: none;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 25px 0;
}

.stats article,
.panel {
  padding: 22px;
  border: 1px solid #39264d;
  border-radius: 16px;
  background: #1b1426;
}

.stats article {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stats small {
  color: #bba8d0;
}

.stats strong {
  font-size: 28px;
  color: #d7adff;
}

.panel {
  margin: 22px 0;
}

.panel h2 {
  margin-top: 5px;
  font-size: 25px;
}

.panel > small {
  color: #bd9bda;
  letter-spacing: 1px;
}

.panel-description {
  color: #aaa2bd;
  font-size: 13px;
}

.player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  margin: 10px 0;
  background: #241a33;
  border: 1px solid #49335f;
  border-radius: 12px;
}

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

.player-info > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-info small {
  color: #aaa2bd;
  font-size: 12px;
}

.twitch-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #7652a8;
  background: #29203d;
}

.ranking-position {
  min-width: 30px;
  font-weight: 800;
  font-size: 18px;
}

.ranking-vip {
  color: #d7a5ff;
  margin-left: 6px;
  font-size: 10px;
  font-weight: bold;
}

.xp {
  color: #d6adff;
  font-weight: 800;
  white-space: nowrap;
}

.profiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.profile-card {
  padding: 20px;
  border: 1px solid #49335f;
  border-radius: 16px;
  background: #1b1426;
  margin-bottom: 16px;
}

.profile-top,
.profile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-top {
  justify-content: space-between;
  flex-wrap: wrap;
}

.profile-identity h3 {
  margin: 4px 0;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #a66aff;
  background: #29203d;
}

.level-badge {
  padding: 7px 12px;
  border-radius: 20px;
  background: #392450;
  color: #dfbdff;
  font-weight: bold;
  font-size: 12px;
}

.profile-xp {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 8px;
  color: #c8bfd8;
  font-size: 12px;
}

.progress-track {
  height: 9px;
  background: #382b48;
  border-radius: 20px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8747ff, #d18aff);
  border-radius: 20px;
}

.profile-currency,
.profile-monthly,
.profile-status {
  margin-top: 12px;
  color: #d8c8ec;
  font-size: 13px;
}

.profile-achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.achievement-tag {
  padding: 6px 10px;
  border-radius: 20px;
  background: #392450;
  color: #e0c5ff;
  font-size: 12px;
}

.vip-profile {
  border-color: #a66aff;
  box-shadow: 0 0 18px #8747ff22;
}

.quest {
  padding: 16px;
  margin: 12px 0;
  border-radius: 12px;
  background: #241a33;
  border: 1px solid #49335f;
}

.quest p {
  color: #c8bdd8;
}

.reward {
  color: #d6adff;
  font-weight: bold;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 25px 0;
}

footer {
  text-align: center;
  padding: 25px;
  color: #8e7d9f;
}

@media (max-width: 600px) {
  header {
    padding: 16px 5%;
  }

  main {
    width: 94%;
  }

  .hero {
    padding: 35px 22px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .player {
    padding: 12px 10px;
  }

  .profile-xp {
    flex-direction: column;
  }
}