@font-face {
    font-family: 'PixelifySans';
    src: url('contents/fonts/PixelifySans-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Blox';
    src: url('contents/fonts/Blox2.ttf') format('truetype');
}
@font-face {
    font-family: 'Lunchds';
    src: url('contents/fonts/lunchds.ttf') format('truetype');
}

@font-face {
    font-family: 'Novem';
    src: url('contents/fonts/novem.ttf') format('truetype');
}
@font-face {
    font-family: 'ipix';
    src: url('contents/fonts/IPix.ttf') format('truetype');
}
header {
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 0;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}

.header-left h1 {
    margin: 0;
    padding: 0 20px;
}

.header-right {
    display: flex;
    gap: 15px;
}

.header-button {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    background-color: #444;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.header-button:hover {
    background-color: #666;
}

.header-button.disabled {
    pointer-events: none; /* 禁用点击 */
    color: grey; /* 修改颜色以显示禁用状态 */
    cursor: default; /* 修改光标 */
    background-color: #FFF; /* 修改背景色 */
}

#languageSelect {
    color: white;
    background-color: #444;
    font-family: 'PixelifySans', 'ipix', sans-serif;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    appearance: none; /* 去掉默认的下拉箭头 */
    -webkit-appearance: none; /* 去掉Safari默认的下拉箭头 */
    -moz-appearance: none; /* 去掉Firefox默认的下拉箭头 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10"><path fill="white" d="M7 10L0 0h14L7 10z"/></svg>'); /* 自定义下拉箭头 */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

#languageSelect:hover {
    background-color: #666;
}
/* 调整内容容器以避免被固定页眉遮挡 */

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard syntax */
    padding-top: 60px;
}
body {
    background-color: black;
    overflow: auto;
    color: white;
    font-family: 'PixelifySans', 'ipix', sans-serif;
    transition: background-color 1s, color 1s; /* 平滑过渡背景颜色和文本颜色 */

    /* 隐藏滚动条的样式 */
    scrollbar-width: none; /* 对于Firefox */
    -ms-overflow-style: none; /* 对于IE和Edge */
}

/* 对于Chrome、Safari和Opera */
body::-webkit-scrollbar {
    display: none;
}
main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.games-content section {
    margin-bottom: 20px;
}

.games-content img {
    max-width: 100%;
    height: auto;
}

.horizontal-scroll {
    width: 100%;
    display: flex;
    overflow-x: auto; /* 开启横向滚动 */
    overflow-y: hidden; /* 隐藏垂直滚动条 */
    -webkit-overflow-scrolling: touch; /* 优化移动设备的滑动 */
}.horizontal-scroll::-webkit-scrollbar {
    height: 10px; /* 滚动条的高度 */
    background-color: #333; /* 滚动条背景色 */
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: #444; /* 滚动条本体颜色 */
    border-radius: 5px; /* 滚动条边角的圆滑程度 */
    border: 2px solid #333; /* 滚动条边框 */
}

/* 自定义滚动条的样式（针对 Firefox） */
.horizontal-scroll {
    scrollbar-color: #555 #222; /* Firefox中设置滚动条颜色 */
}

/* 保证所有图片间距一致并防止图片压缩 */
.horizontal-scroll img {
    height: 512px; /* 或其他根据设计需要的固定高度 */
    flex-shrink: 0;
    margin-right: 10px; /* 添加图片间隔 */
}

.horizontal-scroll img:last-child {
    margin-right: 0; /* 确保最后一张图片右侧没有额外空间 */
}

img {
    visibility: hidden;
    background-color: #666; /* Grey placeholder */
    opacity: 0; /* Start with the image invisible */
    transition: opacity 0.5s ease-in-out; /* Smooth transition for the opacity */
}