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

/* 大屏幕样式 (1400px及以上) - 针对大显示器和高分辨率设备优化布局 */
@media (min-width: 1400px) {
    /* -- main元素在styles.css中已改为flex布局，此处调整flex子元素的宽度占比 -- */
    .game-links,
    .mini-games {
        flex-basis: 250px; /* -- 左侧游戏链接和右侧小游戏区域固定宽度 -- */
    }
    
    .main-game {
        flex-grow: 1; /* -- 中间主游戏区域占据剩余空间 -- */
    }
    
    /* -- 原有的 game-container 高度和 retro-logo 字体大小调整保留 -- */
    .game-container {
        /* -- 游戏容器高度 -- */
        height: 700px; /* 增加游戏容器高度，充分利用大屏幕空间 */
    }
    
    .retro-logo {
        /* -- Logo字体大小 -- */
        font-size: 2.5em; /* 增加Logo字体大小，在大屏幕上更加醒目 (em相对于父元素) */
    }
}

/* 中等屏幕样式 (992px到1199px) - 针对普通笔记本电脑和小型显示器调整布局 */
@media (max-width: 1199px) {
    .mini-game-grid {
        /* -- 小游戏网格列数 -- */
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* -- 在中等屏幕上，保持自适应填充，但最小宽度可以稍小 -- */
    }
    
    .game-container {
        /* -- 游戏容器高度 -- */
        height: 500px; /* 减小游戏容器高度，适应中等屏幕 */
    }

    .game-links,
    .mini-games {
        flex-basis: 180px; /* -- 调整侧边栏在中等屏幕上的基础宽度 -- */
    }
}

/* 小屏幕样式 (768px到991px) - 针对平板设备调整布局 */
@media (max-width: 991px) {
    /* -- 主内容区flex布局方向改为列式，以堆叠侧边栏和主内容 -- */
    main {
        flex-direction: column; /* -- 在平板及更小设备上，主内容区改为列布局 -- */
    }

    .game-links,
    .mini-games {
        /* -- 侧边栏宽度占据100% -- */
        width: 250px; /* -- 滑出菜单时给一个固定宽度 -- */
        /* -- 固定定位，实现侧滑菜单效果 -- */
        position: fixed;
        /* -- 顶部对齐 -- */
        top: 0;
        /* -- 高度为视口高度 -- */
        height: 100vh;
        /* -- 较高层级 -- */
        z-index: 1000;
        /* -- 默认隐藏在屏幕左侧 -- */
        transform: translateX(-100%);
        /* -- 平滑过渡效果 -- */
        transition: transform 0.3s ease-in-out;
        /* -- 背景色，确保滑出时有背景 -- */
        background-color: var(--light-purple); /* 使用主题浅紫色 */
        /* -- 增加一些内边距 -- */
        padding: 1rem;
        /* -- 阴影效果 -- */
        box-shadow: 2px 0 5px rgba(0,0,0,0.2); 
    }

    .mini-games {
        transform: translateX(100%); /* -- 小游戏菜单从右侧滑出 -- */
        right: 0; /* -- 对齐到右边 -- */
        left: auto; /* -- 取消左边定位 -- */
    }
    
    .game-links.active {
        /* -- 激活状态时显示左侧边栏 -- */
        transform: translateX(0);
    }

    .mini-games.active {
        /* -- 激活状态时显示右侧边栏 -- */
        transform: translateX(0);
    }
    
    .mobile-menu-btn {
        /* -- 显示移动端菜单按钮 -- */
        display: block;
        /* -- 固定定位 -- */
        position: fixed;
        /* -- 距离顶部 -- */
        top: 1rem;
        /* -- 距离左侧 -- */
        left: 1rem;
        /* -- 更高层级 -- */
        z-index: 1001;
        /* -- 背景颜色使用主题色 -- */
        background-color: var(--primary-purple);
        /* -- 文字颜色使用浅色 -- */
        color: var(--light-text-color);
        /* -- 无边框 -- */
        border: none;
        /* -- 内边距 -- */
        padding: 0.6rem 0.8rem; /* 调整内边距使按钮更美观 */
        /* -- 圆角 -- */
        border-radius: 5px;
        /* -- 鼠标指针 -- */
        cursor: pointer;
        /* -- 字体大小 -- */
        font-size: 1.2rem; /* 增大图标字体大小 */
        /* -- 过渡效果 -- */
        transition: background-color 0.3s ease;
    }

    .mobile-menu-btn:hover {
        background-color: var(--accent-pink); /* -- 悬停时使用点缀粉色 -- */
    }

    /* -- 为第二个移动端按钮（小游戏切换）调整位置，在 main.js 中通过 style.left 设置，此处可补充 -- */
    button.mobile-menu-btn[style*="left: 4rem"] { /* -- 通过属性选择器选择第二个按钮 -- */
        /* -- 如有需要，可在此处添加额外或覆盖样式 -- */
    }
}

/* 超小屏幕样式 (768px以下，覆盖上面的991px main设置，因为991px设置了flex-direction: column) */
/* 此处可以不需要再次修改main的flex-direction */

/* 超小屏幕样式 (576px及以下) - 针对手机设备优化布局和交互 */
@media (max-width: 576px) {
    .retro-logo {
        /* -- Logo字体大小 -- */
        font-size: 1.8em; /* 调整Logo字体大小 (em相对于父元素) */
    }
    
    header {
        /* -- 头部弹性布局允许换行，以适应语言选择器可能换行的情况 -- */
        flex-direction: column; /* -- 头部内容垂直排列 -- */
        gap: 0.5rem; /* -- 头部各项之间的间距 -- */
    }

    .language-selector {
        /* -- 语言选择器按钮换行 -- */
        flex-wrap: wrap;
        /* -- 居中对齐按钮 -- */
        justify-content: center;
        /* -- 按钮间距 -- */
        gap: 0.3rem;
    }
    
    .lang-btn {
        /* -- 按钮字体大小 -- */
        font-size: 0.8rem;
        /* -- 按钮内边距 -- */
        padding: 0.4rem 0.7rem;
    }
    
    .game-container {
        /* -- 游戏容器高度 -- */
        height: auto; /* 高度自适应内容或保持16:9 */
        padding-bottom: 56.25%; /* 维持16:9比例 */
    }
    
    .fullscreen-btn {
        /* -- 全屏按钮内边距 -- */
        padding: 0.4rem 0.8rem;
        /* -- 全屏按钮字体大小 -- */
        font-size: 0.9rem;
    }
    
    .main-game .game-info h2 { /* main-game内的h2，不是侧边栏的 */
        /* -- 标题字体大小 -- */
        font-size: 1.5em; /* 使用em单位，更灵活 (相对于父元素) */
    }
    
    .main-game .game-info h3 {
        /* -- 副标题字体大小 -- */
        font-size: 1.2em; /* 使用em单位 (相对于父元素) */
    }

    .game-screenshots img {
        width: calc(50% - 5px); /* -- 在超小屏幕上，截图每行显示两个 -- */
        max-width: 180px; /* -- 从120px放大50%到180px -- */
    }

    .why-section .why-content {
        grid-template-columns: 1fr; /* -- "为何选择我们"部分改为单列显示 -- */
    }
}

/* 打印样式 - 针对页面打印优化，隐藏不必要的元素，调整布局 */
@media print {
    .game-container, .mini-games, .game-links, .language-selector, .fullscreen-btn, .mobile-menu-btn {
        /* -- 隐藏游戏容器、侧边栏、语言选择器、全屏按钮和移动菜单按钮 -- */
        display: none !important; /* 使用!important确保隐藏 */
    }
    
    body {
        /* -- 背景为白色 -- */
        background-color: white !important;
        /* -- 文字颜色为黑色 -- */
        color: black !important;
        /* -- 字体使用通用无衬线体 -- */
        font-family: sans-serif !important;
    }
    
    main {
        /* -- 主内容区显示为块级，自然堆叠 -- */
        display: block !important;
        /* -- 移除flex/grid特定布局，改为单列 -- */
        /* grid-template-columns: 1fr;  此行移除，因为main已不是grid */
    }
    
    .game-info {
        /* -- 移除内边距 -- */
        padding: 0 !important;
        box-shadow: none !important; /* -- 移除阴影 -- */
    }

    header, footer {
        background-color: transparent !important; /* -- 页眉页脚背景透明 -- */
        color: black !important; /* -- 文字为黑色 -- */
        border: none !important; /* -- 移除边框 -- */
    }

    a { text-decoration: none !important; color: #000 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8rem; }
}