/* 响应式设计额外样式 - 确保网站在不同屏幕尺寸下都能良好显示 */

/* 大屏幕样式 (1400px及以上) - 针对大显示器和高分辨率设备优化布局 */
@media (min-width: 1400px) {
    main {
        grid-template-columns: 3.5fr 1fr 3.5fr; /* 保持与主样式文件一致，两侧区域更宽，中间更窄 */
    }
    
    .game-container {
        height: 700px; /* 增加游戏容器高度，充分利用大屏幕空间 */
    }
    
    .retro-logo {
        font-size: 2.5rem; /* 增加Logo字体大小，在大屏幕上更加醒目 */
    }
}

/* 中等屏幕样式 (992px到1199px) - 针对普通笔记本电脑和小型显示器调整布局 */
@media (max-width: 1199px) {
    main {
        grid-template-columns: 3fr 1fr 3fr; /* 保持同样的比例关系，只是略微调整 */
    }
    
    .mini-game-grid {
        grid-template-columns: 1fr; /* 将小游戏网格改为单列布局，避免空间不足 */
    }
    
    .game-container {
        height: 500px; /* 减小游戏容器高度，适应中等屏幕 */
    }
}

/* 小屏幕样式 (768px到991px) - 针对平板设备调整布局 */
@media (max-width: 991px) {
    main {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* 保持三列布局，但调整比例 */
        grid-template-areas:
            "left main-content right";
        gap: 0.5rem;
    }
    
    /* 确保左侧游戏列表始终在左侧区域 */
    main > .game-list.left-games {
        grid-area: left;
        max-width: 100%;
        overflow-y: auto;
    }
    
    /* 确保主游戏区域始终在中间区域 */
    main > .main-game {
        grid-area: main-content;
        max-width: 100%;
    }
    
    /* 确保右侧游戏列表始终在右侧区域 */
    main > .game-list.right-games {
        grid-area: right;
        max-width: 100%;
        overflow-y: auto;
    }
    
    /* 调整游戏列表中的游戏项布局 */
    div.game-list.left-games {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 左侧区域保持两列 */
        gap: 0.1rem;
        padding: 4px; /* 修改内边距为4px */
    }
    
    div.game-list.right-games {
        display: grid;
        grid-template-columns: 1fr; /* 右侧区域单列显示 */
        gap: 0.5rem;
    }
    
    /* 调整游戏容器高度 */
    .game-container {
        height: 400px;
    }
    
    /* 调整游戏信息区域的字体大小 */
    .game-info h2 {
        font-size: 1.5rem;
    }
    
    .game-info h3 {
        font-size: 1.2rem;
    }
    
    /* 移动端菜单功能保持不变 */
    .game-links, .mini-games {
        position: fixed;
        top: 0;
        height: 100vh;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    .game-links.active, .mini-games.active {
        transform: translateX(0);
    }
    
    .mobile-menu-btn {
        display: block;
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1001;
        background-color: #2c3e50;
        color: white;
        border: none;
        padding: 0.5rem;
        border-radius: 4px;
        cursor: pointer;
    }
}

/* 超小屏幕样式 (576px及以下) - 针对手机设备优化布局和交互 */
@media (max-width: 576px) {
    /* 在超小屏幕上切换为单列布局 */
    main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main-content"
            "left"
            "right";
    }
    
    /* 其他样式保持不变 */
    .retro-logo {
        font-size: 1.5rem;
    }
    
    .language-selector {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .lang-btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .game-container {
        height: 300px;
    }
    
    .fullscreen-btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .game-info h2 {
        font-size: 1.2rem;
    }
}

/* ===================== 解决主内容区三栏响应式问题 ===================== */
/* 针对超小屏幕（<=580px，实际CSS断点为576px）时，保持main三栏横排，避免所有内容堆到左侧 */
@media (max-width: 580px) {
    /* 主体区域main采用flex横向排列，保证三大区块始终横排 */
    main {
        display: flex !important; /* 强制用flex布局 */
        flex-direction: row !important; /* 横向排列 */
        justify-content: flex-start; /* 从左到右排列 */
        align-items: stretch; /* 高度自适应 */
        overflow-x: auto; /* 横向可滚动，防止内容溢出 */
        width: 100vw; /* 占满屏幕宽度 */
        min-width: 580px; /* 最小宽度，防止内容被压缩变形 */
        box-sizing: border-box;
    }
    /* 下面是新增部分，确保main和main-game在小屏下铺满整个屏幕 */
    main {
        padding: 0 !important; /* 移除main的内边距，防止内容被压缩 */
        margin: 65px 0 0 0 !important;  /* 移除main的外边距，防止出现空白 */
        width: 100vw !important; /* main占满整个视口宽度 */
        min-width: 0 !important; /* 允许main收缩到最小宽度 */
        box-sizing: border-box; /* 采用标准盒模型，padding不会撑大宽度 */
    }
    main > .main-game {
        margin: 0 !important; /* 移除main-game自身的外边距，防止右侧空白 */
        width: 100vw !important; /* main-game占满整个视口宽度 */
        min-width: 0 !important; /* 允许main-game收缩到最小宽度 */
        max-width: 100vw !important; /* main-game最大宽度不超过视口 */
        box-sizing: border-box; /* 采用标准盒模型 */
    }
    /* 左侧区域始终在最左边 */
    main > .game-list.left-games {
        min-width: 120px; /* 左侧区域最小宽度，可根据实际调整 */
        max-width: 180px;
        flex: 0 0 30%; /* 固定占比或宽度 */
        order: 1; /* 保证顺序 */
        height: auto;
    }
    /* 中间主游戏区始终居中 */
    main > .main-game {
        min-width: 220px; /* 中间区域最小宽度 */
        max-width: 100vw;
        flex: 1 1 40%; /* 占据主要空间 */
        order: 2;
        height: auto;
    }
    /* 右侧区域始终在最右边 */
    main > .game-list.right-games {
        min-width: 120px; /* 右侧区域最小宽度 */
        max-width: 180px;
        flex: 0 0 30%;
        order: 3;
        height: auto;
    }
}

/* ===================== 右侧区域小游戏纵向流式排列 ===================== */
/* 针对991px及以下屏幕，右侧区域小游戏从上到下自然堆叠，不平均分布 */
@media (max-width: 991px) {
    /* 右侧区域的游戏列表用flex纵向排列，自动填充 */
    main > .game-list.right-games {
        display: flex !important; /* 用flex布局覆盖grid */
        flex-direction: column !important; /* 纵向排列 */
        align-items: stretch !important; /* 每个小游戏宽度自适应填满父容器 */
        gap: 0.1rem !important; /* 保持间距 */
    }
    /* 右侧每个小游戏宽度100%填满父容器 */
    main > .game-list.right-games .mini-game {
        width: 100% !important;
        min-width: 0;
        margin: 0;
    }
}

/* ===================== 移动端游戏网格样式 ===================== */
/* 移动端游戏网格：默认隐藏，只在页面宽度小于580px时显示 */
.mobile-games-grid {
    display: none; /* 默认隐藏 */
    flex-wrap: nowrap; /* 不换行，支持横向滚动 */
    align-content: flex-start; /* 内容从顶部开始 */
    gap: 0.3rem;
    padding: 1rem;
    margin-top: 1rem;
    background-color: transparent; /* 与game-info一致的透明背景 */
    border-radius: 8px;
    overflow-x: auto; /* 横向滚动 */
    overflow-y: hidden; /* 隐藏纵向滚动 */
    width: 100%; /* 不超过main区域宽度 */
    height: auto; /* 高度自适应两行内容 */
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    scrollbar-width: thin; /* Firefox细滚动条 */
}

/* 当页面宽度小于580px时显示移动端游戏网格 */
@media (max-width: 580px) {
    .mobile-games-grid {
        display: flex !important; /* 在小屏幕显示为弹性布局 */
        flex-direction: column; /* 垂直方向，创建两行 */
        height: auto; /* 高度自适应 */
    }
    
    /* 为了实现两行布局，创建两个子容器 */
    .mobile-games-grid .row {
        display: flex;
        flex: 1;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        overflow-x: auto; /* 每行支持横向滚动 */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-games-grid .row:last-child {
        margin-bottom: 0;
    }
}

/* 滚动条样式优化 - 应用到行容器 */
.mobile-games-grid .row::-webkit-scrollbar {
    height: 4px;
}

.mobile-games-grid .row::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.mobile-games-grid .row::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.mobile-games-grid .row::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Firefox滚动条 */
.mobile-games-grid .row {
    scrollbar-width: thin;
}

/* 移动端游戏卡片样式 - 与左侧区域mini-game样式保持一致 */
.mobile-games-grid .mini-game {
    flex: 0 0 calc(16.666% - 0.42rem); /* 每个卡片宽度为6分之1，减去gap */
    min-width: calc(16.666% - 0.42rem);
    border-radius: 20px; /* 与左侧区域一致的圆角 */
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: rgba(255, 255, 255, 0.9); /* 与左侧区域一致的背景 */
    backdrop-filter: blur(6px);
    border: 1px solid rgba(131, 255, 231, 0.2);
    position: relative;
    aspect-ratio: 1 / 1; /* 正方形比例 */
    display: flex;
}

.mobile-games-grid .mini-game:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px var(--shadow-color-general);
}

.mobile-games-grid .mini-game .game-cover {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.mobile-games-grid .mini-game .game-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-games-grid .mini-game .game-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #FFFFFF;
    padding: 6px 10px;
    text-align: center;
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: none;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}

/* ===================== END ===================== */

/* 打印样式 - 针对页面打印优化，隐藏不必要的元素，调整布局 */
@media print {
    .game-container, .mini-games, .language-selector, .fullscreen-btn {
        display: none; /* 隐藏游戏容器、小游戏区域、语言选择器和全屏按钮，不需要打印 */
    }
    
    body {
        background-color: white; /* 设置背景为白色，节省打印墨水 */
    }
    
    main {
        grid-template-columns: 1fr; /* 改为单列布局，适合打印 */
    }
    
    .game-info {
        padding: 0; /* 移除内边距，节省打印空间 */
    }
}

/* ===================== 针对580px~990px区间的main区域布局优化 ===================== */
@media (min-width: 580px) and (max-width: 990px) {
    /* main区域只保留左侧和中间区域，采用两列布局 */
    main {
        grid-template-columns: 2fr 7fr !important; /* 设置为两列，左侧1份，中间3份，右侧去除 */
        grid-template-areas: "left main-content"; /* 只定义左侧和中间区域的网格区域 */
    }
    /* 隐藏右侧区域（右侧小游戏列表） */
    main > .game-list.right-games {
        display: none !important; /* 在该区间内不显示右侧区域 */
    }
    
    /* 确保左侧区域在580px-990px范围内始终保持两列布局和4px内边距 */
    div.game-list.left-games {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 强制保持两列 */
        gap: 0.1rem;
        padding: 2px !important; /* 强制设置内边距为4px */
    }
}
/* ===================== 针对580px~990px区间的main区域布局优化 ===================== */
@media (max-width: 580px) {
    /* main区域只保留左侧和中间区域，采用两列布局 */
    main {
        grid-template-columns: 1fr !important; /* 设置为两列，左侧1份，中间3份，右侧去除 */
        grid-template-areas: "main-content"; /* 只定义左侧和中间区域的网格区域 */
    }
    /* 隐藏右侧区域（右侧小游戏列表） */
    main > .game-list.right-games {
        display: none !important; /* 在该区间内不显示右侧区域 */
    }
    main > .game-list.left-games {
        display: none !important; /* 在该区间内不显示左侧区域 */
    }
}
/* ===================== END ===================== */

/* ===================== 弹窗大小和布局优化 ===================== */

/* 当页面宽度为580px到990px时，弹窗宽度始终为页面宽度的百分之80，弹窗内布局始终为三行 */
@media (min-width: 580px) and (max-width: 990px) {
    #header-float-menu {
        width: 80vw !important; /* 弹窗宽度为页面宽度的80% */
        max-width: none !important; /* 移除最大宽度限制 */
        display: flex !important; /* 使用flex布局 */
        flex-direction: column !important; /* 垂直排列 */
        gap: 1rem !important; /* 行间距 */
    }
    
    /* 第一行：logo */
    #header-float-menu .logo-container {
        order: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    /* 第二行：导航栏 */
    #header-float-menu .main-nav {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    /* 第三行：搜索框和下拉式多语言选择器 */
    #header-float-menu .search-container,
    #header-float-menu .language-dropdown {
        order: 3;
        display: inline-block;
    }
    
    /* 第三行容器 */
    #header-float-menu .search-container {
        margin: 0 0.5rem;
    }
    
    #header-float-menu .language-dropdown {
        margin: 0 0.5rem;
    }
    
    /* 确保第三行的搜索框和语言选择器在同一行 */
    #header-float-menu > div:last-child {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
    }
}

/* 当页面宽度小于580px时，弹窗宽度始终为页面宽度的百分之100，弹窗内布局始终为四行 */
@media (max-width: 579px) {
    #header-float-menu {
        width: 100vw !important; /* 弹窗宽度为页面宽度的100% */
        max-width: none !important; /* 移除最大宽度限制 */
        left: 0 !important; /* 左对齐 */
        transform: none !important; /* 移除居中变换 */
        border-radius: 0 !important; /* 移除圆角 */
        display: flex !important; /* 使用flex布局 */
        flex-direction: column !important; /* 垂直排列 */
        gap: 1rem !important; /* 行间距 */
        padding: 1rem !important; /* 调整内边距 */
    }
    
    /* 第一行：logo */
    #header-float-menu .logo-container {
        order: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    /* 第二行：导航栏 */
    #header-float-menu .main-nav {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0;
    }
    
    /* 第三行：搜索框 */
    #header-float-menu .search-container {
        order: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0;
        margin: 0 !important; /* 移除原有边距 */
    }
    
    /* 第四行：下拉式多语言选择器 */
    #header-float-menu .language-dropdown {
        order: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.5rem 0;
        margin: 0 !important; /* 移除原有边距 */
    }
    
    /* 调整搜索框在小屏幕下的样式 */
    #header-float-menu .search-input {
        width: 200px !important; /* 固定宽度 */
        max-width: 80vw; /* 最大宽度不超过视口宽度的80% */
    }
    
    /* 调整导航栏在小屏幕下的样式 */
    #header-float-menu .nav-links {
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center;
        gap: 0.5rem;
    }
    
    #header-float-menu .nav-links a {
        font-size: 0.9rem; /* 减小字体大小 */
        padding: 0.3rem 0.6rem; /* 减小内边距 */
    }
}

/* ===================== END ===================== */