/* ==========================================================================
   1. 基础与背景设置 (Body)
   ========================================================================== */
body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;

    /* 游戏背景图设置 */
    background-image: url("images/Steve.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: white;
    margin: 0;
    min-height: 100vh;
    /* 注意：移除了 body 的 flex 居中，改由中间容器接管 */
}

/* ==========================================================================
   2. 左侧固定留言板 (#comment-sidebar)
   ========================================================================== */
#comment-sidebar {
    position: fixed;           /* 核心：固定在屏幕左侧，不随页面滚动 */
    left: 20px;
    top: 20px;
    width: 260px;
    height: calc(100vh - 40px); /* 高度撑满屏幕减去上下边距 */

    background: rgba(255, 255, 255, 0.93); /* 高亮白底，带一点透明 */
    backdrop-filter: blur(10px);           /* 留言板也加一点毛玻璃 */
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);

    color: #333333;            /* 必须是深色字，确保白底能看清 */
    z-index: 100;              /* 确保永远悬浮在最上层 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;    /* 让内部表单垂直排列 */
}

#comment-sidebar h3 {
    margin-top: 0;
    color: #111;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
}

/* 留言列表滚动区域 */
#comment-list {
    flex: 1;                   /* 自动撑开，占满剩余空间 */
    overflow-y: auto;          /* 留言多了自动出现滚动条 */
    margin-bottom: 15px;
    padding-right: 5px;
}

/* 独立留言卡片 */
#comment-list p {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    margin: 0 0 8px 0;
    font-size: 0.9em;
    border-left: 4px solid #007bff;
    word-break: break-all;     /* 防止长英文撑破容器 */
}

/* 输入框与文本域 */
input, textarea {
    width: 100%;
    padding: 10px;
    margin: 6px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border 0.3s;
}

input:focus, textarea:focus {
    border-color: #007bff;
    outline: none;
}

textarea {
    resize: none;              /* 禁止用户手动拉伸输入框 */
    height: 70px;
}

/* 提交按钮 */
button {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    transition: background 0.2s;
}

button:hover { background: #0056b3; }

/* ==========================================================================
   3. 中间主体内容区域 (.content-wrapper)
   ========================================================================== */
.content-wrapper {
    margin-left: 300px;        /* 关键：给左边 260px 宽的留言板留出安全空隙 */
    display: flex;
    flex-direction: column;
    align-items: center;       /* 让公告和下载列表在右侧区域居中 */
    padding: 40px 20px;
    box-sizing: border-box;
}

/* 公告栏 */
.announcement {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.announcement h3 {
    margin-top: 0;
    color: #facc15;
    letter-spacing: 2px;
}

/* 下载列表 */
.download-section {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    width: 100%;
    max-width: 500px;
}

.download-section li {
    background: rgba(0, 0, 0, 0.7);
    margin: 15px 0;
    padding: 20px 30px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
    text-align: center;
}

.download-section li:hover {
    background: rgba(30, 30, 30, 0.9);
    transform: translateY(-3px);
}

.download-section a {
    text-decoration: none;
    color: #3b82f6;
    font-weight: bold;
    font-size: 1.1em;
}

.download-section a:visited { color: #9333ea; }

/* ==========================================================================
   4. 移动端响应式适配 (@media)
   ========================================================================== */
@media (max-width: 850px) {
    /* 当屏幕太窄放不下左右布局时，自动切回上下垂直堆叠模式 */
    #comment-sidebar {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 500px;       /* 宽度与中间组件对齐 */
        height: auto;
        margin: 0 auto 30px auto;
    }

    .content-wrapper {
        margin-left: 0;        /* 清除左边距，让内容回正 */
        padding: 20px;
    }
}