/* style.css - 自定义样式表 */

/* 基础样式 (虽然大部分用 Tailwind，这里可以放一些全局或特定的覆盖样式) */
body {
    /* 在 Tailwind 配置中已设置 Nunito 字体和背景色 */
    /* 这里可以添加其他全局样式，比如更平滑的滚动 */
    scroll-behavior: smooth;
}

/* Logo 样式 */
.logo {
    /* 可以添加一些更精细的样式，比如文字阴影或者渐变 */
    /* 例如：添加一点发光效果 */
    text-shadow: 0 0 5px rgba(52, 211, 153, 0.7); /* 使用品牌绿色并带点透明度 */
    font-family: 'Nunito', sans-serif; /* 确保 Logo 也使用 Nunito */
    /* 如果需要更复杂的运动风格，可能需要 SVG 或 Canvas */
}

/* 语言切换按钮激活状态 */
.lang-switch.active {
    background-color: #34d399; /* 品牌绿色 */
    color: #1f2937; /* 品牌深色 */
    font-weight: bold;
}

/* 游戏区域全屏时的样式 */
#game-container.fullscreen {
    position: fixed; /* 固定定位，覆盖整个屏幕 */
    top: 0;
    left: 0;
    width: 100vw; /* 视口宽度 */
    height: 100vh; /* 视口高度 */
    padding-top: 0; /* 全屏时移除 padding-top */
    z-index: 9999; /* 置于顶层 */
    background-color: #000; /* 全屏时背景设为纯黑 */
}

/* 全屏时 iframe 样式 (保持 100% 宽高) */
#game-container.fullscreen iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 全屏时隐藏全屏按钮 (或者可以改成退出全屏按钮) */
/* #game-container.fullscreen + #fullscreen-btn { */
/*    display: none; */
/* } */

/* 内容区域标题的左边框 */
/* Tailwind 已经处理了: .border-l-4 .border-brand-green .pl-2 */

/* 增加段落间距，提高可读性 */
#content-section p {
    margin-bottom: 1em; /* 段落下方增加一些空白 */
}

/* 评论块样式 */
#reviews blockquote {
    background-color: rgba(255, 255, 255, 0.05); /* 轻微的背景色，增加区分度 */
    padding: 1em; /* 增加内边距 */
    border-left-color: #6b7280; /* 调整引用边框颜色 */
    border-radius: 4px; /* 添加圆角 */
}

/* 占位符图片的样式 (如果需要) */
img[src$="_placeholder.jpg"] {
    background-color: #4b5563; /* 给占位符一个深灰色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.875rem; /* text-sm */
    /* 可以添加一个文字提示 */
    /* content: 'Screenshot'; */
}

/* 响应式调整：小屏幕下可能需要调整字体大小或间距 */
@media (max-width: 768px) {
    h1 {
        font-size: 1.875rem; /* text-3xl -> text-2xl */
    }
    h2 {
        font-size: 1.25rem; /* text-2xl -> text-xl */
    }
    h3 {
        font-size: 1.125rem; /* text-xl -> text-lg */
    }
    body {
         font-size: 0.95rem; /* 稍微减小基础字体大小 */
    }
}

/* 给特定的内容块增加可爱的视觉元素 */
/* 例如，给特点列表项加个小图标？ */
#features h3::before {
    /* content: '🎮 '; */ /* 示例：加个游戏手柄图标 */
    /* margin-right: 0.5em; */
    /* 需要找到合适的图标并可能用背景图片实现 */
}