.related-matrix-container {
    max-width: 760px;
    margin: 80px auto;  /* 上下边距相等，实现垂直居中 */
    padding: 0 20px;
    padding-bottom: 100px;
}

.related-matrix-title {
    font-family: "Roboto Mono", monospace;
    font-size: 16px;
    font-weight: 450;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 20px;  /* 减小标题和箭头的距离 */
}

.matrix-container {
    position: relative;
    width: 50%;  /* 进一步缩小矩阵宽度 */
    max-width: 400px;  /* 减小最大宽度 */
    aspect-ratio: 1;  /* 确保是正方形 */
    border: 1.5px solid var(--color-text);
    margin: 0 auto;  /* 居中显示 */
}

.point-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    /* 为标题提供定位上下文 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 项目标题样式 */
.point-title {
    position: absolute;
    bottom: 100%;  /* 放置在点的上方 */
    margin-bottom: 5px;  /* 与点的间距 */
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    color: var(--color-text);
    white-space: nowrap;  /* 防止标题换行 */
    opacity: 0;  /* 默认隐藏 */
    transform: translateY(5px);  /* 初始位置略低 */
    transition: all 0.1s ease;  /* 平滑过渡效果 */
    pointer-events: none;  /* 防止标题影响鼠标事件 */
}

/* 悬停时显示标题 */
.point-wrapper:hover .point-title {
    opacity: 1;
    transform: translateY(0);  /* 向上移动到最终位置 */
}

.point {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 16px;
    height: 16px;
    border: 1.2px solid var(--color-text);
    border-radius: 50%;
    transition: all 0.1s ease;
    cursor: url('../images/cross.svg') 10 10, auto;
}

/* 当前项目点的样式 */
.point.current {
    border-color: var(--color-red);  /* 边框改为红色 */
    background-color: transparent;  /* 保持空心 */
    width: 12px;
    height: 12px;
    pointer-events: none;
    cursor: default;
}

.point:hover,
.point-wrapper:hover .point:not(.current) {
    transform: scale(1.5);
}

/* 已访问项目点的样式 */
.point.visited {
    border: none;
    background-image: url('../images/footprint.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 20px;  /* 调整大小以适应图标 */
    height: 20px;
    opacity: 0.7;  /* 稍微调整透明度 */
}

/* 保持已访问项目点的悬停效果 */
.point.visited:hover {
    transform: scale(1.4);
    opacity: 1;
}

/* 确保当前项目点的样式优先级更高 */
.point.current.visited {
    background-image: none;  /* 当前项目不显示足迹图标 */
    border: 1.2px solid var(--color-red);
    width: 16px;
    height: 16px;
}

/* 坐标轴样式 */
.matrix-container::before,
.matrix-container::after {
    content: '';
    position: absolute;
    background-color: var(--color-text);
    opacity: 0.95;
}

/* 垂直轴 */
.matrix-container::before {
    width: 1.2px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

/* 水平轴 */
.matrix-container::after {
    height: 1.2px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* 坐标轴标签容器 */
.axis-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: "Roboto Mono", monospace;
    font-style: italic;
    font-size: 10px;
    color: var(--color-text);
    font-weight: 600;
}

/* 坐标轴标签样式 */
.x-label {
    position: absolute;
    top: 48%;
    transform: translateY(-50%);

}

.x-label.left {
    left: 2px;
}

.x-label.right {
    right: 2px;
}

.y-label {
    position: absolute;
    transform-origin: left center;
    transform: rotate(90deg);
    white-space: nowrap;

}

.y-label.top {
    left: 52%;
    top: -2px;
}

.y-label.bottom {
    left: 52%;
    bottom: 52px;
}

/* 点预览框样式 */
.point-preview {
    position: fixed;
    z-index: 1000;
    background: var(--color-background);
    border: 1.2px solid var(--color-text);
    padding: 6px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.point-preview img {
    width: 200px;
    aspect-ratio: 4.8/3;
    object-fit: cover;
    display: block;
}

.link-wrapper {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    display: block;
}

.link-wrapper.current {
    pointer-events: none;
    cursor: default;
}

/* 当前项目的标签样式 */
.current-label {
    position: absolute;
    left: 50%;
    top: 8px;  /* 减小与点的距离 */
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    color: var(--color-red);
    pointer-events: none;
}

/* 向下箭头 */
.down-arrow {
    margin: 0 auto;
    margin-bottom: 20px;  /* 箭头和矩阵的距离 */
    position: relative;
    height: 8px;  /* 增加尖端的高度 */
    width: 8px;  /* 增加尖端的宽度 */
}

/* 箭头尖端 */
.down-arrow::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-right: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    transform: rotate(45deg);
}

/* 感谢信息样式 */
.thanks-message {
    text-align: left;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 450;
    opacity: 0.7;
    color: var(--color-text);
    min-height: 1.2em;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* 省略号样式 */
.dots-message {
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 450;
    color: var(--color-text);
    opacity: 0.7;
    min-height: 1.2em;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* 省略号链接样式 */
.dots-link {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    font-weight: 450;
    padding-bottom: 2px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}

.dots-link:hover {
    opacity: 0.75;
}

/* 合作信息样式 */
.collaborate-message {
    text-align: left;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 450;
    color: var(--color-text);
    opacity: 0.7;
    min-height: 1.2em;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* 回应信息样式 */
.response-message {
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 450;
    letter-spacing: 0.5px;
    color: var(--color-text);
    opacity: 0.7;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* 回应链接样式 */
.response-link {
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 450;
    color: var(--color-text);
    opacity: 0.7;
    min-height: 1.2em;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.response-link:hover {
    opacity: 0.75;
}

/* 成就信息样式 */
.achievement-message {
    text-align: center;
    margin-top: 64px;
    font-size: 14px;
    font-weight: 450;
    opacity: 0.7;
    color: var(--color-text);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* 奖励链接样式 */
.reward-link {
    text-decoration: none;
    color: inherit;
    font-weight: 450;
    opacity: 0.7;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    cursor: help;
    transition: all 0.2s ease;
}

.reward-link:hover {
    opacity: 1;
    border-bottom-width: 1.2px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) and (hover: none) {
    .related-matrix-container {
        max-width: 760px;
        width: calc(100% - 20px);  /* 减小左右边距 */
        margin: 80px auto;
        padding: 0;
    }
    
    .matrix-container {
        position: relative;
        width: 70%;  /* 增加矩阵宽度 */
        max-width: 500px;  /* 设置最大宽度限制 */
        aspect-ratio: 1;
        border: 1.5px solid var(--color-text);
        margin: 0 auto;
    }
    

    /* 调整点的大小 */
    .project-point {
        width: 16px;
        height: 16px;
    }

    /* 调整标签大小 */
    .point-label {
        font-size: 14px;  /* 稍微增加字体大小 */
    }
    
    .thanks-message {
        margin-top: 100px;
    }

    .achievement-message {
        width: 100%;
    }
    
}