.all {
    display: flex;            /* 开启弹性盒子布局 */
    flex-direction: column;   /* 核心：设为纵向排列（一竖排） */
    align-items: center;      /* 水平方向居中 */
    justify-content: center;  /* 垂直方向居中 */
    width: 100%;              /* 宽度占满屏幕 */
    min-height: 100vh;        /* 高度占满整个屏幕视口 */
}


.page1 {
    width: 90%;
    max-width: 960px;
    transition: 0.3s;
    background-color: rgba(255, 251, 0, 0.5);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);/*阴影*/
    border-radius: 10px;/*圆角*/
    color: black;
    backdrop-filter: blur(10px);/*毛玻璃*/
    text-align: center;
    padding: 5px 5px 15px 5px;/*内边距*/
    margin: 10px;/*外边距*/
}
.page1 .ciallo{
    width: 40%;
    max-width: 200px;
    height: 50px;
    padding: 10px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: bold;
    background-color: rgba(0, 255, 128, 0.9);
    backdrop-filter: blur(5px);
    color: black;
}


/* Open Galgame by steam */
.galgame {
    width: 90%;
    max-width: 960px;
    height: auto;
    background-color: rgba(0, 255, 150, 0.5);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);/*阴影*/
    text-align: center;
    padding: 5px 5px 13px 5px;
}
/* 游戏卡片容器 */
.galgameBox {
    display: flex;
    flex-wrap: wrap;      /* 核心：宽度不够自动换行 */
    justify-content: center; /* 居中对齐 */
    gap: 15px;            /* 卡片之间的间距 */
    max-width: 950px;    /* 最大限制宽度 */
    margin: 0 auto;
}
/* 单个游戏卡片设置 */
.gameCard {
    flex: 0 1 175px;      /* 初始宽度175px，不放大，可缩小 */
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
}
.gamePicture {
    transition: all 0.3s ease;
    width: 100%;          /* 撑满卡片宽度 */
    aspect-ratio: 6 / 9;  /* 核心：强制设置 6:9 比例 */
    object-fit: cover;    /* 确保图片填满容器且不拉伸变形 */
    border-radius: 10px;  /* 圆角美化 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.gameCard:hover {
    transform: translateY(-5px) scale(1.05);
    filter: brightness(1.1) contrast(0.95) saturate(0.95);  
}
/* 响应式调整：当屏幕宽度小于 650px 时（大约两个卡片并排不下的宽度） */
@media (max-width: 650px) {
    .gameCard {
        flex: 0 1 80% !important; /* 强制占据大部分宽度，实现竖排 */
    }
}


/*网页底部跳转链接区域*/
.link {
    margin: 20px auto;
    text-align: center;
}
.blink,.clink,.dnshelink,.qbqlink {
    display: inline-flex;
    align-items: center;     /* 垂直居中 */
    padding: 6px 16px 6px 8px; /* 左边稍微收紧（因为有头像），右边留出呼吸感 */
    margin: 5px;
    
    background-color: rgb(0, 174, 255, 0.3);
    backdrop-filter: blur(5px);
    color: white !important;  /* 强制白色 */
    text-decoration: none !important;
    
    border-radius: 20px;     /* 全圆角 */
    font-weight: bold;     /*粗体字*/
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ProfilePicture,.cialloPicture,.dnshePicture,.qbqPicture {
    width: 28px !important;   /* 稍微大一点点 */
    height: 28px !important;
    border-radius: 50%;
    margin-right: 8px;        /* 关键：和文字拉开距离 */
    border: 2px solid rgba(255, 255, 255, 0.8);
    object-fit: cover;
}
.blink:hover,.clink:hover,.dnshelink:hover,.qbqlink:hover,.luokuanneirong:hover {
    transform: translateY(-2px) scale(1.05); /* 向上跳动一下 */
    box-shadow: 0 6px 16px rgba(0, 174, 236, 0.7);
    filter: brightness(1.1);
}
.luokuan {
    margin: 0% 0% 1% 0%;
}
.luokuanneirong{
    padding: 10px 50px 10px 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
    font-weight: bold;
    background-color: rgb(0, 174, 255, 0.3);
    border-radius: 30px;
    backdrop-filter: blur(5px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}