.profile {
  width: 100%;
  flex-shrink: 0;
  background: var(--surface-background);
  color: var(--ui-text);

  .profile_inner {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
    gap: 14px 24px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 28px;
  }

  .profile_identity {
    display: contents;
  }

  .profile_avatar {
    position: relative;
    flex: none;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 200px;
    height: 200px;

    .avatar {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: 16px;
    }

  }

  .head {
    grid-column: 2;
    align-self: end;
    min-width: 0;

    .page_title {
      margin: 0;
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.15;
      overflow-wrap: anywhere;
    }
  }

  .profile_catchphrase {
    margin: 6px 0 0;
    color: #526171;
    font: 14px/1.45 system-ui, sans-serif;
    overflow-wrap: anywhere;
  }

  .profile_actions {
    margin-top: 10px;
  }

  .profile_action {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 14px;
  }

  .basic_stats {
    grid-column: 2;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;

    &.basic_stats_self { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    .stat {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      padding: 10px;
      border: 1px solid var(--ui-border);
      border-radius: var(--ui-radius);
      background: var(--ui-surface);
    }

    dt {
      color: #526171;
      font: 12px/1.3 system-ui, sans-serif;
    }

    .value {
      order: -1;
      margin: 0;
      color: var(--ui-text);
      font: 21px/1.1 'Acme';
      overflow-wrap: anywhere;
      font-variant-numeric: tabular-nums;
    }

    .tokens .value { color: #247346; }
    .level .value { color: var(--ui-focus); }
  }
}

#content_wrapper {
  overflow: auto;
  position: relative;
  border-top: 1px solid var(--ui-border);
  flex-grow: 1;

  .tail {
    position: relative;

    h2.page_subtitle {
      color: #333;
      font-size: 1.8em;
      clear: both;
    }
  }
}

@media (max-width: 900px) {
  .profile {
    .basic_stats, .basic_stats.basic_stats_self {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

@media (max-width: 600px) {
  .profile {
    .profile_inner {
      grid-template-columns: 160px minmax(0, 1fr);
      padding: 12px;
      gap: 4px 16px;
    }
    .profile_avatar { width: 160px; height: 160px; }
    .head .page_title { font-size: 25px; }
    .profile_catchphrase { margin-top: 4px; font-size: 12px; }

    .basic_stats, .basic_stats.basic_stats_self {
      grid-template-columns: minmax(0, 1fr);
      gap: 1px;
    }

    .basic_stats .stat {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding: 0;
      border: 0;
      background: none;
    }

    .basic_stats dt { font-size: 12px; line-height: 1.15; }
    .basic_stats .value { order: 0; font-size: 16px; line-height: 1; text-align: right; }
  }
}