* {
  box-sizing: border-box;
}


body {
  margin: 0;

  min-height: 100vh;

  background:
    #0d1217;

  color:
    #f5f5f5;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


.page {
  width:
    min(
      1100px,
      calc(
        100% - 40px
      )
    );

  margin:
    0 auto;

  padding:
    40px 0 80px;
}


.page-header {
  display: flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    30px;
}


h1 {
  margin:
    0 0 10px;

  font-size:
    3rem;
}


h2 {
  margin:
    0;

  font-size:
    2rem;
}


.subtitle {
  margin: 0;

  color:
    #b9bec4;

  font-size:
    1.1rem;
}


.back-link {
  display:
    inline-block;

  color:
    #a763ff;

  font-size:
    1rem;

  text-decoration:
    underline;
}


.status {
  min-height:
    24px;

  margin-bottom:
    14px;

  color:
    #b9bec4;
}


.status.error {
  color:
    #ff7a7a;
}


.tabs {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-bottom:
    20px;
}


.tab-button {
  border:
    1px solid
    #555d65;

  border-radius:
    10px;

  padding:
    12px 18px;

  background:
    #171d23;

  color:
    #f5f5f5;

  font-size:
    1rem;

  cursor:
    pointer;

  transition:
    background 0.15s,
    border-color 0.15s;
}


.tab-button:hover {
  background:
    #20272e;
}


.tab-button.active {
  border-color:
    #8a43d6;

  background:
    #2b173f;
}


.leaderboard-card {
  border:
    1px solid
    #555d65;

  border-radius:
    20px;

  padding:
    30px;

  background:
    #11171c;
}


.leaderboard-title-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    25px;
}


.leaderboard-description {
  margin:
    8px 0 0;

  color:
    #b9bec4;
}


.leaderboard-header,
.leaderboard-row {
  display:
    grid;

  grid-template-columns:
    90px
    minmax(
      180px,
      1fr
    )
    minmax(
      200px,
      auto
    );

  align-items:
    center;

  gap:
    20px;
}


.leaderboard-header {
  padding:
    0 16px 12px;

  border-bottom:
    1px solid
    #444b52;

  color:
    #aeb4ba;

  font-size:
    0.9rem;

  font-weight:
    bold;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}


.leaderboard-row {
  min-height:
    72px;

  padding:
    14px 16px;

  border-bottom:
    1px solid
    #2d343a;
}


.leaderboard-row:last-child {
  border-bottom:
    none;
}


.rank {
  font-size:
    1.15rem;

  font-weight:
    bold;
}


.player-name {
  overflow-wrap:
    anywhere;

  font-size:
    1.1rem;

  font-weight:
    bold;
}


.score {
  text-align:
    right;

  font-size:
    1.1rem;
}


.gem-score {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    4px;
}


.gem-score span {
  color:
    #b9bec4;

  font-size:
    0.95rem;
}


.empty-message {
  margin:
    20px 0 0;

  color:
    #b9bec4;
}


@media (
  max-width: 700px
) {
  .page {
    width:
      min(
        100% - 24px,
        1100px
      );

    padding-top:
      24px;
  }


  .page-header {
    flex-direction:
      column;
  }


  h1 {
    font-size:
      2.4rem;
  }


  .leaderboard-card {
    padding:
      20px 14px;
  }


  .leaderboard-header {
    display:
      none;
  }


  .leaderboard-row {
    grid-template-columns:
      54px
      1fr;

    gap:
      12px;
  }


  .score {
    grid-column:
      2;

    text-align:
      left;
  }


  .gem-score {
    align-items:
      flex-start;
  }
}