/* 基础重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面背景和字体样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

/* 包裹游戏列表的父容器 */
#parentContainer {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 垂直对齐方式 */
    width: 100%; /* 确保占满 100% 宽度 */
}

/* 标题样式 */
h3 {
    color: #4A90E2;
    margin-bottom: 15px;
}

/* 链接样式 */
a {
    color: #4A90E2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 按钮样式 */
.btn {
    background-color: #4A90E2;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #357ABD;
}

/* 下拉框样式 */
.filter-box {
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff; 
}

/* 游戏列表样式 */
#gameListDiv {
    display: flex;
    flex-wrap: wrap;
    margin: 5px auto; /* 上下各10px，左右自动 */
    max-width: 1200px; /* 设置一个最大宽度 */
    justify-content: center; /* 使内容在水平上居中 */
    width: 100%; /* 确保容器占满 100% 宽度 */
    box-sizing: border-box; /* 包括内边距和边框在内的宽度计算 */
}

/* 每个游戏项的样式 */
.game {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px; /* 增加内边距 */
    margin: 5px ; /* 设定间距 */
    width: 130px; /* 修改宽度，以便容纳更大的图标 */
    height: 160px; /* 修改宽度，以便容纳更大的图标 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    transition: transform 0.2s;
    text-align: center; /* 让内容居中 */
} 

.game:hover {
    transform: scale(1.05);
}

/* 增加图标样式 */
.game img {
    width: 80px; /* 设置图标宽度 */
    height: 80px; /* 设置图标高度 */
    margin-bottom: 10px; /* 图标与文字之间的间距 */
}

/* 优化选择框和按钮的排列 */
select {
    width: 180px;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* 页脚样式 */
footer {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #777;
}