/* Global Styles / 全局样式 */
:root {
    /* Define color variables / 定义颜色变量 */
    --primary-pink: #FF69B4; /* 主要粉色 */
    --secondary-blue: #87CEEB; /* 次要蓝色 */
    --light-pink: #FFB6C1; /* 浅粉色 */
    --light-blue: #B0E0E6; /* 浅蓝色 */
    --text-color: #333; /* 文本颜色 */
    --background-color: #FFF; /* 背景颜色 */
}

* {
    /* Reset default margins and padding / 重置默认边距和内边距 */
    margin: 0;
    padding: 0;
    /* Include padding and border in element's total width and height / 将内边距和边框包含在元素的总宽度和高度内 */
    box-sizing: border-box;
}

body {
    /* Set default font family / 设置默认字体 */
    font-family: 'Quicksand', sans-serif;
    /* Set default line height / 设置默认行高 */
    line-height: 1.6;
    /* Set default text color / 设置默认文本颜色 */
    color: var(--text-color);
    /* Set default background color / 设置默认背景颜色 */
    background-color: var(--background-color);
}

.container {
    /* Set maximum width for content / 设置内容最大宽度 */
    max-width: 1200px;
    /* Center the container horizontally / 水平居中容器 */
    margin: 0 auto;
    /* Add horizontal padding / 添加水平内边距 */
    padding: 0 20px;
}

/* Header Styles / 头部样式 */
.site-header {
    /* Apply gradient background / 应用渐变背景 */
    background: linear-gradient(135deg, var(--primary-pink), var(--secondary-blue));
    /* Add padding / 添加内边距 */
    padding: 1rem 0;
    /* Add shadow / 添加阴影 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Use Flexbox for layout / 使用 Flexbox 布局 */
    display: flex; 
    align-items: center; /* Vertically center items / 垂直居中项目 */
}

/* Ensure header container uses flex */
.site-header .container {
    display: flex;
    align-items: center;
    width: 100%; /* Make container take full width */
}

.logo h1 {
    /* Set font size for logo / 设置 Logo 字体大小 */
    font-size: 2.5rem;
    /* Set logo text color / 设置 Logo 文本颜色 */
    color: white;
    /* Add text shadow / 添加文本阴影 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* Set font weight / 设置字体粗细 */
    font-weight: 700;
    margin-right: auto; /* Push navigation and selector to the right / 将导航和选择器推到右侧 */
}

.main-nav ul {
    /* Use Flexbox for navigation items / 对导航项使用 Flexbox */
    display: flex;
    /* Remove list bullets / 移除列表项目符号 */
    list-style: none;
    /* Add gap between items / 添加项目间距 */
    gap: 2rem;
}

.main-nav a {
    /* Set link color / 设置链接颜色 */
    color: white;
    /* Remove underline / 移除下划线 */
    text-decoration: none;
    /* Set font weight / 设置字体粗细 */
    font-weight: 500;
    /* Add transition effect / 添加过渡效果 */
    transition: color 0.3s ease;
}

.main-nav a:hover {
    /* Change color on hover / 悬停时改变颜色 */
    color: var(--light-pink);
}

/* Game Container Styles / 游戏容器样式 */
.hero-section {
     padding: 0; /* Remove padding if game container takes full width */
}

.game-container {
    /* Relative positioning for absolute child / 相对定位，用于绝对定位的子元素 */
    position: relative;
    /* Full width / 全宽 */
    width: 100%;
    /* Set height relative to viewport height / 设置相对于视口高度的高度 */
    height: 75vh; /* Adjusted height */
    /* Gradient background / 渐变背景 */
    background: linear-gradient(45deg, var(--light-pink), var(--light-blue));
    /* Rounded corners / 圆角 */
    border-radius: 0; /* Remove border radius if it spans full width */
    /* Hide overflow / 隐藏溢出内容 */
    overflow: hidden;
    /* Top margin / 顶部边距 */
    margin-top: 1rem;
}

#gameFrame {
    display: block; /* Ensure iframe behaves like a block element */
    width: 100%;
    height: 100%;
    border: none; /* Remove iframe border */
}

.fullscreen-btn {
    /* Absolute positioning / 绝对定位 */
    position: absolute;
    /* Position at bottom right / 定位在右下角 */
    bottom: 20px;
    right: 20px;
    /* Padding / 内边距 */
    padding: 10px 20px;
    /* Background color / 背景颜色 */
    background: var(--primary-pink);
    /* Text color / 文本颜色 */
    color: white;
    /* Remove border / 移除边框 */
    border: none;
    /* Rounded corners / 圆角 */
    border-radius: 25px;
    /* Pointer cursor / 手形光标 */
    cursor: pointer;
    /* Transition effect / 过渡效果 */
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 10; /* Ensure button is above iframe */
}

.fullscreen-btn:hover {
    /* Scale up on hover / 悬停时放大 */
    transform: scale(1.05);
    background-color: var(--secondary-blue); /* Change background on hover */
}

/* Fullscreen Mode Styles / 全屏模式样式 */
.game-container:-webkit-full-screen {
  width: 100%;
  height: 100%;
}
.game-container:-moz-full-screen {
  width: 100%;
  height: 100%;
}
.game-container:-ms-fullscreen {
  width: 100%;
  height: 100%;
}
.game-container:fullscreen {
  width: 100%;
  height: 100%;
}

/* Section Styles / 内容区域样式 */
section {
    /* Vertical padding / 垂直内边距 */
    padding: 3rem 0;
}

h2 {
    /* Heading font size / 标题字体大小 */
    font-size: 2.2rem;
    /* Heading color / 标题颜色 */
    color: var(--primary-pink);
    /* Bottom margin / 底部边距 */
    margin-bottom: 2rem;
    /* Center align text / 文本居中 */
    text-align: center;
    font-weight: 700; /* Bolder headings */
}

h3 {
    /* Sub-heading font size / 副标题字体大小 */
    font-size: 1.6rem;
    /* Sub-heading color / 副标题颜色 */
    color: var(--secondary-blue);
    /* Bottom margin / 底部边距 */
    margin-bottom: 1rem;
    font-weight: 600; /* Slightly bolder sub-headings */
}

p {
     margin-bottom: 1rem; /* Add space below paragraphs / 在段落下添加空间 */
}

/* Card Base Style / 卡片基础样式 */
.guide-step, .feature-card, .review-card, .reason-card {
    /* Background color / 背景颜色 */
    background: white;
    /* Padding / 内边距 */
    padding: 2rem;
    /* Rounded corners / 圆角 */
    border-radius: 15px;
    /* Box shadow / 盒子阴影 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    /* Transition effect / 过渡效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guide-step:hover, .feature-card:hover, .review-card:hover, .reason-card:hover {
    /* Lift effect on hover / 悬停时提升效果 */
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* Enhance shadow on hover */
}

/* Guide Section / 指南部分 */
.guide-content {
    /* Use CSS Grid for layout / 使用 CSS Grid 布局 */
    display: grid;
    /* Define responsive columns / 定义响应式列 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Gap between grid items / 网格项之间的间距 */
    gap: 2rem;
}

/* Features Section / 特色部分 */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center; /* Center text in feature cards / 特色卡片中文本居中 */
}

/* Reviews Section / 评价部分 */
.reviews-section {
     background-color: var(--light-blue); /* Light blue background */
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.reviewer {
    /* Reviewer text color / 评价者文本颜色 */
    color: var(--primary-pink);
    /* Font weight / 字体粗细 */
    font-weight: 600;
    /* Top margin / 顶部边距 */
    margin-top: 1rem;
    /* Display as block / 作为块级元素显示 */
    display: block;
    text-align: right; /* Align reviewer name to the right / 评价者姓名右对齐 */
}

/* About Section / 关于部分 */
.about-content {
    display: flex; /* Use flexbox / 使用 flexbox */
    gap: 3rem; /* Gap between history and team / 历史和团队之间的间距 */
    flex-wrap: wrap; /* Allow wrapping on smaller screens / 允许在小屏幕上换行 */
}

.history, .team {
    flex: 1; /* Allow items to grow and shrink / 允许项目增长和收缩 */
    min-width: 280px; /* Minimum width before wrapping / 换行前的最小宽度 */
}

/* Why Love Section / 玩家喜爱原因部分 */
.why-love-section {
    background-color: var(--light-pink); /* Light pink background / 浅粉色背景 */
}

.reasons-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
}

/* User Comments Section / 用户评论区样式 */
.comments-section {
    padding: 3rem 0;
    background-color: #f9f9f9; /* Light gray background for contrast / 浅灰色背景以形成对比 */
}

.comments-section h2 {
     color: var(--secondary-blue); /* Use secondary blue for this heading / 此标题使用次要蓝色 */
}

.comments-grid {
    /* Use CSS Grid for layout / 使用 CSS Grid 布局 */
    display: grid;
    /* Define responsive columns / 定义响应式列 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Gap between grid items / 网格项之间的间距 */
    gap: 1.5rem;
}

.comment-card {
    /* Inherit base card styles but override background if needed */
    background: white; /* White background for comments / 评论区白色背景 */
    padding: 1.5rem;
    border-radius: 10px; /* Slightly less rounded corners / 稍小的圆角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); /* Softer shadow / 更柔和的阴影 */
    display: flex; /* Use flexbox for layout inside card */
    flex-direction: column; /* Stack text and author vertically */
    justify-content: space-between; /* Push author to the bottom */
    min-height: 150px; /* Minimum height for consistency / 保证一致性的最小高度 */
}

.comment-text {
    /* Comment text specific styles / 评论文本特定样式 */
    font-style: italic; /* Italicize comment text / 评论文本斜体 */
    color: #555; /* Darker gray text / 深灰色文本 */
    margin-bottom: 1rem; /* Space above author / 作者上方的空间 */
    flex-grow: 1; /* Allow text to take available space */
}

.commenter {
    /* Commenter text styles / 评论者文本样式 */
    color: var(--primary-pink); /* Use primary pink for commenter / 评论者使用主粉色 */
    font-weight: 600;
    text-align: right; /* Align commenter to the right / 评论者右对齐 */
    font-size: 0.9rem; /* Slightly smaller font size / 稍小的字体大小 */
}

/* Footer Styles / 页脚样式 */
.site-footer {
    /* Gradient background / 渐变背景 */
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-pink));
    /* Text color / 文本颜色 */
    color: white;
    /* Padding / 内边距 */
    padding: 2.5rem 0;
    /* Top margin / 顶部边距 */
    margin-top: 3rem;
}

.footer-content {
    /* Center align text / 文本居中 */
    text-align: center;
}

.footer-content p {
    margin-bottom: 0.5rem; /* Reduce space between footer paragraphs / 减少页脚段落间距 */
}

.footer-content a {
    /* Link color / 链接颜色 */
    color: white;
    /* Remove underline / 移除下划线 */
    text-decoration: none;
    transition: opacity 0.3s ease; /* Add transition */
}

.footer-content a:hover {
     opacity: 0.8; /* Slightly transparent on hover / 悬停时略微透明 */
}

/* Language Selector / 语言选择器 */
.language-selector {
    /* Push to the far right in the header / 在头部推到最右侧 */
    margin-left: 2rem; /* Add some space from nav */
}

.language-selector select {
    /* Padding / 内边距 */
    padding: 0.6rem 1rem;
    /* Rounded corners / 圆角 */
    border-radius: 25px;
    /* Border style / 边框样式 */
    border: 2px solid white;
    /* Transparent background / 透明背景 */
    background: transparent;
    /* Text color / 文本颜色 */
    color: white;
    /* Pointer cursor / 手形光标 */
    cursor: pointer;
    font-family: inherit; /* Inherit body font */
    font-size: 0.9rem;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom arrow */
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; /* Space for custom arrow */
}

.language-selector select option {
     color: var(--text-color); /* Color for options dropdown */
     background-color: var(--background-color);
}

/* Responsive Design / 响应式设计 */
@media (max-width: 992px) {
    .site-header .container {
         flex-wrap: wrap; /* Allow header items to wrap */
         justify-content: center; /* Center items when wrapped */
         gap: 1rem; /* Add gap when wrapped */
    }
    .logo h1 {
         width: 100%; /* Full width logo on wrap */
         text-align: center;
         margin-right: 0;
         margin-bottom: 1rem;
    }
     .main-nav {
         order: 3; /* Move nav below selector */
         width: 100%;
     }
    .main-nav ul {
        justify-content: center; /* Center nav items */
        gap: 1.5rem;
    }
    .language-selector {
         order: 2; /* Move selector above nav when wrapped */
         margin-left: 0;
    }
}

@media (max-width: 768px) {
    .main-nav ul {
        flex-direction: column; /* Stack nav items vertically */
        align-items: center;
        gap: 1rem;
    }

    .game-container {
        /* Adjust game height for tablets / 调整平板设备上的游戏高度 */
        height: 65vh;
    }

    .logo h1 {
        /* Adjust logo size / 调整 Logo 大小 */
        font-size: 2rem;
    }

    h2 {
        /* Adjust heading size / 调整标题大小 */
        font-size: 1.9rem;
    }

    h3 {
        /* Adjust sub-heading size / 调整副标题大小 */
        font-size: 1.4rem;
    }
    .about-content {
         gap: 2rem; /* Reduce gap in about section */
    }
}

@media (max-width: 480px) {
    .game-container {
        /* Adjust game height for phones / 调整手机设备上的游戏高度 */
        height: 55vh;
    }

    .container {
        /* Reduce horizontal padding / 减少水平内边距 */
        padding: 0 15px;
    }
    h2 {
        font-size: 1.7rem;
    }
    h3 {
        font-size: 1.3rem;
    }
    .fullscreen-btn {
         padding: 8px 16px; /* Smaller button on mobile */
         font-size: 0.9rem;
         bottom: 15px;
         right: 15px;
    }
    .language-selector select {
        padding: 0.5rem 0.8rem;
        padding-right: 25px; /* Space for arrow */
        background-position: right 8px center;
    }
}