/* Import Tailwind's base styles (preflight) */
@tailwind base;

/* Import Tailwind's component classes */
@tailwind components;

/* Import Tailwind's utility classes */
@tailwind utilities;

/* Custom Styles (if needed) */

/* 设置全局字体 (将在 Tailwind 配置中定义) */
body {
    /* 字体设置: 优先使用 Nunito, 备选 sans-serif */
    font-family: 'Nunito', sans-serif;
    /* 默认文字颜色 */
    color: #374151; /* 约等于 Tailwind text-gray-700 */
    /* 页面背景色 */
    background-color: #f9fafb; /* 约等于 Tailwind bg-gray-50 */
    /* 移除默认的 body margin */
    margin: 0;
    /* 添加一些全局上下边距 */
    padding: 24px 0; /* 约等于 Tailwind py-6 */
    /* 设置基本行高 */
    line-height: 1.6;
}

/* 容器类: 移除宽度限制和居中 */
.container {
    /* max-width: 1280px; */ /* 移除或注释掉 */
    /* margin-left: auto; */  /* 移除或注释掉 */
    /* margin-right: auto; */ /* 移除或注释掉 */
    /* 左右内边距 (保持) */
    padding-left: 16px;
    padding-right: 16px;
}

/* 页眉样式 */
header {
    /* 背景色 */
    background-color: #ffffff; /* 白色 */
    /* 阴影效果 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 约等于 Tailwind shadow-md */
    /* 上下内边距 */
    padding-top: 16px; /* 约等于 Tailwind py-4 */
    padding-bottom: 16px;
    /* 底部外边距 */
    margin-bottom: 32px; /* 约等于 Tailwind mb-8 */
}

/* 页眉容器特定布局: 使用 Flexbox */
.header-container {
    /* 启用 Flexbox 布局 */
    display: flex;
    /* 垂直居中对齐 */
    align-items: center;
}

/* Logo (H1) 样式 */
header h1 {
    /* 应用 Pacifico 字体 */
    font-family: 'Pacifico', cursive;
    /* 字体大小 */
    font-size: 2.25rem; /* 约等于 Tailwind text-4xl */
    line-height: 2.5rem;
    /* 字体颜色 */
    color: #059669; /* 约等于 Tailwind text-green-600 */
    /* 占据可用空间 */
    flex-grow: 1;
    /* 文本居中 */
    text-align: center;
    /* 移除默认 H1 margin */
    margin: 0;
}

/* 导航 (语言切换器) 样式 */
header nav {
    /* 将其推到最右侧 */
    margin-left: auto;
}

/* 语言切换器下拉框样式 */
#language-switcher {
    /* 内边距 */
    padding: 8px; /* 约等于 Tailwind p-2 */
    /* 边框 */
    border: 1px solid #a7f3d0; /* 约等于 Tailwind border-green-300 */
    /* 圆角 */
    border-radius: 0.25rem; /* 约等于 Tailwind rounded */
    /* 背景色 */
    background-color: #ffffff;
    /* 字体大小 */
    font-size: 0.875rem; /* 约等于 Tailwind text-sm */
    line-height: 1.25rem;
    /* 移除默认 outline，用 focus 状态替代 */
    outline: none;
}

/* 下拉框获得焦点时的样式 */
#language-switcher:focus {
    /* 添加外发光效果 */
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5); /* 约等于 Tailwind ring-2 ring-green-500 */
}

/* 游戏区域 Section */
#game-section {
    /* 底部外边距 */
    margin-bottom: 48px; /* 约等于 Tailwind mb-12 */
    /* 相对定位，为内部绝对定位的按钮提供基准 */
    position: relative;
    /* 圆角 */
    border-radius: 0.5rem; /* 约等于 Tailwind rounded-lg */
    /* 隐藏溢出内容（如果 iframe 或按钮超出） */
    overflow: hidden;
    /* 阴影效果 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 约等于 Tailwind shadow-lg */
    /* 高度设置 (保持之前的设定) */
    height: 70vh;
}

/* 游戏 iframe 样式 */
#game-iframe {
    /* 宽度和高度充满父容器 */
    width: 100%;
    height: 100%;
    /* 移除边框 */
    border: none;
}

/* 全屏按钮样式 */
#fullscreen-button {
    /* 绝对定位 */
    position: absolute;
    /* 定位到右下角 */
    bottom: 12px; /* 约等于 Tailwind bottom-3 */
    right: 12px; /* 约等于 Tailwind right-3 */
    /* 背景色 */
    background-color: #059669; /* 约等于 Tailwind bg-green-600 */
    /* 文字颜色 */
    color: #ffffff;
    /* 字体加粗 */
    font-weight: 700; /* 约等于 Tailwind font-bold */
    /* 内边距 */
    padding: 8px 16px; /* 约等于 Tailwind py-2 px-4 */
    /* 圆角 */
    border-radius: 0.25rem; /* 约等于 Tailwind rounded */
    /* 字体大小 */
    font-size: 1rem; /* 约等于 Tailwind text-base */
    line-height: 1.5rem;
    /* 边框设为 none */
    border: none;
    /* 鼠标指针样式 */
    cursor: pointer;
    /* 过渡效果 */
    transition: background-color 0.3s ease;
}

/* 全屏按钮鼠标悬浮效果 */
#fullscreen-button:hover {
    /* 悬浮时背景色加深 */
    background-color: #047857; /* 约等于 Tailwind hover:bg-green-700 */
}

/* 游戏信息区域 Section: 移除宽度限制和居中 */
#game-info {
    /* max-width: 896px; */ /* 移除或注释掉 */
    /* margin-left: auto; */  /* 移除或注释掉 */
    /* margin-right: auto; */ /* 移除或注释掉 */
}

/* 信息卡片通用样式 */
.info-card {
    /* 内边距 */
    padding: 24px; /* 约等于 Tailwind p-6 */
    /* 圆角 */
    border-radius: 0.5rem; /* 约等于 Tailwind rounded-lg */
    /* 阴影 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* 约等于 Tailwind shadow */
    /* 卡片间底部外边距 */
    margin-bottom: 40px; /* 约等于 Tailwind space-y-10 */
}

/* 绿色背景卡片 */
.green-card {
    background-color: #d1fae5; /* 约等于 Tailwind bg-green-50 */
}

/* 白色背景卡片 */
.white-card {
    background-color: #ffffff;
}

/* 信息区域 H2 标题样式 */
#game-info h2 {
    /* 字体大小 */
    font-size: 1.875rem; /* 约等于 Tailwind text-3xl */
    line-height: 2.25rem;
    /* 字体粗细 */
    font-weight: 600; /* 约等于 Tailwind font-semibold */
    /* 底部边框 */
    border-bottom: 1px solid #a7f3d0; /* 约等于 Tailwind border-green-200 */
    /* 边框和文字的间距 */
    padding-bottom: 8px; /* 约等于 Tailwind pb-2 */
    /* 文字颜色 */
    color: #047857; /* 约等于 Tailwind text-green-700 */
    /* 底部外边距 */
    margin-bottom: 16px; /* 约等于 Tailwind mb-4 或 mb-6 (取中间值) */
    /* 文本居中 */
    text-align: center;
    /* 移除默认 H2 margin-top */
    margin-top: 0;
}

/* 特性列表 H2 标题的底部外边距稍大 */
#game-info .white-card h2[data-translate="featuresTitle"],
#game-info .white-card h2[data-translate="playerReviewsTitle"] {
    margin-bottom: 24px; /* 约等于 Tailwind mb-6 */
}

/* 信息区域 H3 标题样式 */
#game-info h3 {
    /* 字体大小 */
    font-size: 1.25rem; /* 约等于 Tailwind text-xl */
    line-height: 1.75rem;
    /* 字体粗细 */
    font-weight: 500; /* 约等于 Tailwind font-medium */
    /* 文字颜色 */
    color: #059669; /* 约等于 Tailwind text-green-600 */
    /* 底部外边距 */
    margin-bottom: 8px; /* 约等于 Tailwind mb-2 */
    /* 移除默认 H3 margin-top */
    margin-top: 0;
}

/* 信息区域段落样式 */
#game-info p {
    /* 行间距 */
    line-height: 1.75; /* 约等于 Tailwind leading-relaxed */
    /* 移除默认 p margin */
    margin: 0;
}

/* 特性列表内部间距 */
.info-card[data-translate="featuresTitle"] > div > div {
    margin-bottom: 24px; /* 约等于 Tailwind space-y-6 for inner divs */
}
.info-card[data-translate="featuresTitle"] > div > div:last-child {
    margin-bottom: 0;
}

/* 评论列表内部间距 */
.info-card[data-translate="playerReviewsTitle"] > div > blockquote {
    margin-bottom: 24px; /* 约等于 Tailwind space-y-6 for blockquotes */
}
.info-card[data-translate="playerReviewsTitle"] > div > blockquote:last-child {
    margin-bottom: 0;
}

/* 评论引用块样式 */
blockquote {
    /* 左边框 */
    border-left: 4px solid #34d399; /* 约等于 Tailwind border-l-4 border-green-500 */
    /* 内边距 */
    padding: 16px; /* 约等于 Tailwind p-4 */
    /* 斜体 */
    font-style: italic;
    /* 背景色 */
    background-color: #d1fae5; /* 约等于 Tailwind bg-green-50 */
    /* 圆角 */
    border-radius: 0.25rem; /* 约等于 Tailwind rounded */
    /* 移除默认 blockquote margin */
    margin: 0;
}

/* 评论内容段落 */
blockquote p {
    /* 底部外边距 */
    margin-bottom: 8px; /* 约等于 Tailwind mb-2 */
}

/* 评论署名样式 */
blockquote footer {
    /* 字体大小 */
    font-size: 0.875rem; /* 约等于 Tailwind text-sm */
    line-height: 1.25rem;
    /* 文字颜色 */
    color: #4b5563; /* 约等于 Tailwind text-gray-600 */
    /* 取消斜体 */
    font-style: normal;
}

/* 页脚样式 */
footer {
    /* 顶部外边距 */
    margin-top: 64px; /* 约等于 Tailwind mt-16 */
    /* 内边距 */
    padding: 32px; /* 约等于 Tailwind p-8 */
    /* 背景色 */
    background-color: #d1fae5; /* 约等于 Tailwind bg-green-50 */
    /* 文本居中 */
    text-align: center;
    /* 字体大小 */
    font-size: 0.875rem; /* 约等于 Tailwind text-sm */
    line-height: 1.25rem;
    /* 文字颜色 */
    color: #374151; /* 约等于 Tailwind text-gray-700 */
}

/* 页脚段落样式 */
footer p {
    /* 底部外边距 */
    margin-bottom: 8px; /* 约等于 Tailwind mb-2 */
    /* 移除默认 p margin-top */
    margin-top: 0;
}

/* 页脚最后一个段落移除底部外边距 */
footer p:last-child {
    margin-bottom: 0;
}

/* 页脚链接样式 */
footer a {
    /* 文字颜色 */
    color: #2563eb; /* 约等于 Tailwind text-blue-600 */
    /* 移除下划线 */
    text-decoration: none;
}

/* 页脚链接悬浮效果 */
footer a:hover {
    /* 添加下划线 */
    text-decoration: underline;
}

/* Pacifico 字体只应用给 Header H1 */
header h1 {
    font-family: 'Pacifico', cursive;
}

/* 响应式设计示例 (使用 Tailwind 的断点) */
/* @media (max-width: 768px) { */
    /* #game-section {
        height: 50vh; /* Adjust iframe height on smaller screens */
    /* } */
/* } */