/* 基本重置与默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans SC', sans-serif, 'Microsoft YaHei', Arial; /* 优先使用 Noto Sans SC 改善中文字体 */
    line-height: 1.6;
    color: #f0f0f0; /* 深色背景配浅色文字 */
    /* 背景样式 - 选择一种或组合 */
    /* 选项 1: 渐变背景 */
    background: linear-gradient(135deg, #2a2a3a 0%, #3a3a4a 100%);
    /* 选项 2: 图片背景 (用你的图片路径替换 'images/background.jpg') */
    /*
    background-image: url('images/background.jpg');
    background-size: cover; /* 覆盖整个区域 */
    background-position: center; /* 居中显示 */
    background-attachment: fixed; /* 固定背景，滚动时不移动 */
    */
    min-height: 100vh; /* 确保背景至少覆盖整个视口高度 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直堆叠元素 */
}

.container {    max-width: 1200px;    margin: 0 auto 20px; /* 修改这里：将上边距改为0，左右自动，下边距保留20px */    padding: 20px;    flex-grow: 1;}

.main-header {
    text-align: center; /* 居中对齐 */
    margin-bottom: 30px; /* 底部外边距 */
    /* 如果添加了主标题 H1，可以在这里设置样式 */
    /*
    h1 {
        font-size: 2.5em;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
    }
    */
}

/* 区服列表布局 */
.server-list {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许卡片换行 */
    gap: 30px; /* 卡片之间的间隙 */
    justify-content: center; /* 水平居中卡片 */
}

/* 区服卡片样式 */
.server-card {
    background-color: rgba(0, 0, 0, 0.3); /* 半透明深色背景 */
    border-radius: 15px; /* 圆角效果，类似参考图 */
    overflow: hidden; /* 防止内容溢出圆角 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 类似参考图的微妙边框 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 柔和阴影 */
    flex: 1 1 350px; /* Flex 属性: 增长因子, 收缩因子, 基础宽度 (最小宽度) */
    max-width: 450px; /* 可选: 卡片最大宽度 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
    backdrop-filter: blur(8px); /* 毛玻璃效果 (需要浏览器支持) */
    -webkit-backdrop-filter: blur(8px); /* Safari 浏览器前缀 */
}

.server-card:hover {
    transform: translateY(-5px); /* 鼠标悬停时轻微上移 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* 悬停时阴影加深 */
}

.card-content {
    padding: 25px 30px; /* 卡片内容区域内边距 */
    text-align: center; /* 文本居中 */
}

.server-card h2 {
    font-size: 1.8em; /* 标题字号 */
    margin-bottom: 10px; /* 标题下边距 */
    color: #ffffff; /* 标题颜色 */
    font-weight: 700; /* 字体加粗 */
}

.server-card .description {
    font-size: 1.1em; /* 描述文字字号 */
    color: #c0c0c0; /* 描述文字颜色，稍暗 */
    margin-bottom: 15px; /* 描述下边距 */
}

.server-card .status {
    font-size: 1em; /* 状态文字字号 */
    font-weight: bold; /* 字体加粗 */
    margin-bottom: 25px; /* 状态下边距 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 轻微圆角 */
    display: inline-block; /* 让背景色只包裹文字 */
}

/* 状态颜色 */
.status-open { /* 开放中 */
    background-color: rgba(76, 175, 80, 0.7); /* 绿色调 */
    color: #fff;
}
.status-pending { /* 即将开放/敬请期待 */
    background-color: rgba(255, 152, 0, 0.7); /* 橙色调 */
    color: #fff;
}
.status-maintenance { /* 维护中/测试中 */
    background-color: rgba(244, 67, 54, 0.7); /* 红色调 */
    color: #fff;
}
/* 可根据需要添加更多状态样式 */

/* 按钮组布局 */
.button-group {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许按钮换行 */
    gap: 15px; /* 按钮之间的间隙 */
    justify-content: center; /* 水平居中按钮 */
}

/* 按钮样式 */
.button-group .btn {
    flex: 1 1 120px; /* 按钮 Flex 属性 */
    padding: 10px 15px; /* 内边距 */
    text-decoration: none; /* 去掉下划线 */
    color: #e0e0e0; /* 按钮文字颜色 */
    background-color: rgba(255, 255, 255, 0.1); /* 微妙的背景色 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 类似参考图的白色边框 */
    border-radius: 8px; /* 圆角按钮 */
    text-align: center; /* 文本居中 */
    font-weight: bold; /* 字体加粗 */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* 过渡效果 */
    white-space: nowrap; /* 防止按钮文字换行 */
}

.button-group .btn:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 悬停时背景色加深 */
    border-color: rgba(255, 255, 255, 0.7); /* 悬停时边框变亮 */
    color: #ffffff; /* 悬停时文字变白 */
}

/* 页脚样式 */
footer {
    text-align: center; /* 居中 */
    margin-top: 40px; /* 距离上方内容的距离 */
    padding: 15px; /* 内边距 */
    background-color: rgba(0, 0, 0, 0.2); /* 可选的页脚背景色 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部细线 */
    font-size: 0.9em; /* 字号 */
    color: #aaa; /* 文字颜色 */
}

/* 响应式调整 */
@media (max-width: 768px) { /* 针对平板及更小设备 */
    .container {
        padding: 15px; /* 减小内边距 */
    }

    .server-card {
        flex-basis: 90%; /* 在小屏幕上让卡片更宽 */
        max-width: none; /* 移除最大宽度限制 */
    }

    .server-card h2 {
        font-size: 1.6em; /* 适当减小标题字号 */
    }

    .button-group .btn {
        flex-basis: 45%; /* 大约每行显示两个按钮 */
    }
}

@media (max-width: 480px) { /* 针对手机屏幕 */
    .server-card h2 {
        font-size: 1.4em;
    }

    .server-card .description {
        font-size: 1em;
    }

    .button-group .btn {
        flex-basis: 100%; /* 每个按钮占满一行 */
        padding: 12px; /* 可以适当增加按钮高度 */
    }

    footer {
        font-size: 0.8em; /* 减小页脚字号 */
    }
}