/* ==========================================================
   4. 游戏介绍
   section-introduction.css: Game Introduction Styles
   ========================================================== */

/* 游戏定义容器 - 玻璃效果 */
#introduction .game-definition-container {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
    background: rgba(13, 16, 25, 0.6);
    border-radius: var(--card-radius);
    backdrop-filter: blur(8px);
    box-shadow: var(--box-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 30px;
    position: relative;
    overflow: hidden;
}
#introduction .game-definition-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.game-definition-left, .game-definition-right { flex: 1; padding: 0; background: none; border-radius: 0; box-shadow: none; border: none; }
.game-definition-left h3, .game-definition-right h3 { color: var(--secondary-color); margin-bottom: 20px; font-size: 1.5rem; font-weight: 600; text-shadow: var(--text-shadow); position: relative; display: inline-block; padding-bottom: 5px; }
.game-definition-left h3::after, .game-definition-right h3::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--secondary-color); box-shadow: 0 0 8px rgba(230, 213, 138, 0.4); }
.game-definition-left p, .game-definition-right p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 15px; font-size: 1rem; }

/* 游戏对比模块 - 玻璃效果 */
.game-comparison {
    margin: 60px 0;
    background: linear-gradient(135deg, rgba(16, 32, 47, 0.7), rgba(23, 25, 48, 0.8));
    border-radius: var(--card-radius); padding: 40px;
    box-shadow: var(--box-shadow), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border); backdrop-filter: blur(5px);
}
.game-comparison h3 { font-size: 1.8rem; text-align: center; margin-bottom: 20px; color: var(--secondary-color); text-shadow: var(--title-text-shadow); }
.comparison-intro { text-align: center; max-width: 800px; margin: 0 auto 40px; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; text-shadow: var(--text-shadow); }
.comparison-slogan { font-weight: bold; font-size: 1.2rem; color: var(--secondary-color); margin: 15px 0; text-shadow: 0 0 10px rgba(230, 213, 138, 0.3); }
.key-difference { display: flex; align-items: center; background: linear-gradient(135deg, rgba(16, 32, 47, 0.6), rgba(13, 16, 25, 0.7)); padding: 30px; border-radius: 10px; border: 1px solid var(--glass-border); margin-top: 40px; box-shadow: var(--box-shadow); border-left: 5px solid var(--secondary-color); }
.difference-icon { min-width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); display: flex; align-items: center; justify-content: center; margin-right: 25px; color: white; font-size: 1.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px rgba(230, 213, 138, 0.3); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.difference-content h4 { font-size: 1.3rem; margin-bottom: 10px; color: var(--secondary-color); text-shadow: var(--text-shadow); }
.difference-content p { color: var(--text-secondary); line-height: 1.6; margin: 0; text-shadow: var(--text-shadow); }
/* 对比表格样式在 components/tables.css 或 components.css 中 */

/* 特色区域 */
.features { margin-bottom: 60px; }
.features h3 { font-size: 1.8rem; text-align: center; margin-bottom: 40px; color: var(--secondary-color); text-shadow: var(--title-text-shadow); position: relative; padding-bottom: 10px; }
.features h3::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: var(--secondary-color); box-shadow: 0 0 10px rgba(230, 213, 138, 0.4); }
/* 特色网格2x2布局 */
@media (min-width: 769px) { #introduction .features-grid { grid-template-columns: repeat(2, 1fr); } }
/* 特色卡片基础样式在 components/cards.css 或 components.css 中 */
.feature-card { padding: 30px 25px 80px; min-height: 400px; }
.feature-icon { width: 60px; height: 60px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.05); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.05); }
.feature-icon i { font-size: 24px; color: var(--secondary-color); text-shadow: 0 0 8px rgba(230, 213, 138, 0.4); }
/* 图标变体 */
.feature-icon.world-icon { background: radial-gradient(circle, rgba(52, 152, 219, 0.2), transparent 70%); }
.feature-icon.world-icon i { color: var(--ice-blue); text-shadow: 0 0 8px rgba(52, 152, 219, 0.5); }
.feature-icon.freedom-icon { background: radial-gradient(circle, rgba(78, 204, 163, 0.2), transparent 70%); }
.feature-icon.freedom-icon i { color: var(--emerald); text-shadow: 0 0 8px rgba(78, 204, 163, 0.5); }
.feature-icon.mind-icon { background: radial-gradient(circle, rgba(74, 99, 181, 0.2), transparent 70%); }
.feature-icon.mind-icon i { color: var(--primary-color); text-shadow: 0 0 8px rgba(74, 99, 181, 0.5); }
.feature-card h4 { font-size: 1.3rem; margin-bottom: 15px; color: var(--secondary-color); text-shadow: var(--text-shadow); }
.feature-card p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 15px; font-size: 0.95rem; text-shadow: var(--text-shadow); }
/* 特色卡片内文档链接定位 */
.feature-card .document-link { position: absolute; bottom: 25px; right: 25px; text-align: right; margin-top: 0; left: auto; }
.feature-card .elegant-link { padding: 8px 16px; font-size: 1rem; }
.feature-card .link-icon { font-size: 1.2rem; }