/* 全局样式和重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的高亮效果 */
}

:root {
    /* 颜色方案 */
    --primary-color: #1a237e;     /* 深蓝色 - 主色 */
    --secondary-color: #00bcd4;   /* 青色 - 辅助色 */
    --accent-color: #ff5722;      /* 橙红色 - 点缀色 */
    --background-light: #f5f5f5;  /* 浅灰色背景 */
    --background-dark: #212121;   /* 深灰色背景 */
    --text-light: #ffffff;        /* 浅色文本 */
    --text-dark: #333333;         /* 深色文本 */
    
    /* 字体 */
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Open Sans', sans-serif;
    
    /* 间距 */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
    
    /* 边框 */
    --border-radius: 8px;
    
    /* 动画时间 */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* 游戏预览特定颜色 */
    --snake-bg: #a3d9a5; /* 贪吃蛇背景色 */
    --snake-color: #38761d; /* 蛇的颜色 */
    --snake-food-color: #e67e22; /* 食物颜色 */
    --tetris-bg: #d1e0e0; /* 俄罗斯方块背景色 */
    --tetris-grid-line: #b0c4c4; /* 俄罗斯方块网格线颜色 */
    --memory-bg: #e1bee7; /* 记忆翻牌背景色 */
    --memory-card-front: #9c27b0; /* 记忆卡片正面 */
    --memory-card-icon: #ffffff; /* 记忆卡片图标 */
}

html, body {
    overflow-x: hidden; /* 防止水平滚动 */
    width: 100%;
    position: relative;
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
    min-height: 100vh; /* 确保至少有视口高度 */
    padding-bottom: env(safe-area-inset-bottom); /* iOS安全区域适配 */
    background-image: linear-gradient(to bottom, 
        var(--background-light) 0%,
        var(--background-light) 60%,
        rgba(26, 35, 126, 0.1) 70%,
        rgba(0, 188, 212, 0.2) 100%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-fast) ease;
}

a:hover {
    color: var(--secondary-color);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.btn {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast) ease, transform var(--transition-fast) ease;
}

.btn:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    color: var(--text-light);
}

.btn-secondary {
    background-color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
}

.section {
    padding: var(--spacing-lg) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.games-showcase .section-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.section-title::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: var(--spacing-xs) auto;
}

.games-showcase .section-title::after {
    background-color: var(--accent-color);
}

/* 导航栏样式 */
.navbar {
    background-color: var(--primary-color);
    padding: var(--spacing-sm) 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.nav-links {
    display: flex;
    list-style: none;
    align-items: center; /* 确保所有导航项垂直居中对齐 */
}

.nav-links li {
    margin-left: var(--spacing-md);
    display: flex; /* 使所有导航项都使用flex布局 */
    align-items: center; /* 垂直居中 */
}

.nav-links a {
    color: var(--text-light);
    font-weight: 600;
    position: relative;
    padding: 0.5rem 0; /* 增加点击区域 */
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--secondary-color);
    transition: width var(--transition-normal) ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* GitHub链接样式 */
.github-link {
    margin-left: var(--spacing-md);
    display: flex;
    align-items: center;
}

.github-link a {
    font-size: 1.3rem; /* 缩小图标尺寸 */
    color: var(--text-light);
    transition: transform var(--transition-normal) ease, color var(--transition-normal) ease;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0.5rem 0; /* 与其他导航项保持一致的padding */
}

.github-link a:hover {
    color: var(--accent-color);
    transform: scale(1.2);
}

.github-link a::after {
    display: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1001; /* 确保菜单按钮在最上层 */
    padding: 8px; /* 增加点击区域 */
    margin: -8px; /* 抵消padding增加的空间 */
    position: relative;
}

.menu-toggle span {
    display: block;
    height: 2px; /* 降低高度使线条更细腻 */
    width: 100%;
    background-color: var(--text-light);
    border-radius: 3px;
    transition: all 0.3s ease;
    position: absolute;
    left: 0;
}

/* 分散三条线的位置 */
.menu-toggle span:nth-child(1) {
    top: 0;
}

.menu-toggle span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.menu-toggle span:nth-child(3) {
    bottom: 0;
}

/* 汉堡菜单动画 - 改进版 */
.menu-toggle.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* 欢迎区样式 */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(26,35,126,0.5), rgba(0,188,212,0.3)), url('../images/hero-bg.png') center center/cover no-repeat;
    color: var(--text-light);
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    margin-top: 0;
    padding-top: 70px; /* 为固定导航栏腾出空间 */
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    /* 使用渐变色文字替代纯白色 */
    background: linear-gradient(to right, #ff9ce3, #ffffff, #a6d9ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 添加文字阴影增强效果 */
    text-shadow: 0 0 10px rgba(255, 156, 227, 0.7), 
                 0 0 20px rgba(166, 217, 255, 0.5);
    /* 添加轻微动画效果 */
    animation: titleGlow 3s infinite alternate;
}

/* 添加标题光晕动画 */
@keyframes titleGlow {
    from {
        text-shadow: 0 0 10px rgba(255, 156, 227, 0.7),
                     0 0 20px rgba(166, 217, 255, 0.5);
    }
    to {
        text-shadow: 0 0 15px rgba(255, 156, 227, 0.9),
                     0 0 30px rgba(166, 217, 255, 0.7),
                     0 0 45px rgba(166, 217, 255, 0.4);
    }
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
}

.hero-btns {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* 游戏预览卡片区样式 */
.games-showcase {
    background-image: url('../images/game.png');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: var(--spacing-xl) 0;
}

/* 添加半透明遮罩 */
.games-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* 黑色半透明遮罩 */
    z-index: 1;
}

/* 确保内容在遮罩之上 */
.games-showcase .container {
    position: relative;
    z-index: 2;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.game-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-normal) ease, box-shadow var(--transition-normal) ease;
    display: flex; /* 使用flex布局使内容和按钮区域分开 */
    flex-direction: column; /* 垂直排列 */
    height: 100%; /* 确保所有卡片高度一致 */
}

.game-card:hover, .game-card:active {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.game-image {
    width: 100%;
    height: 220px; /* 预览区域高度 */
    position: relative;
    overflow: hidden; /* 确保预览动画不溢出 */
}

.game-content {
    padding: var(--spacing-sm);
    flex-grow: 1; /* 使内容区域填充剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 将按钮推到底部 */
}

.game-content h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
}

.game-content p {
    color: #666;
    margin-bottom: var(--spacing-sm);
    flex-grow: 1; /* 使描述文字填充可用空间 */
}

.game-content .btn {
    width: 100%;
    text-align: center;
    margin-top: auto; /* 将按钮推到内容区域的底部 */
}

/* --- 游戏预览动画通用容器 --- */
.preview-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation; /* 改善移动端触摸体验 */
}

/* --- 贪吃蛇预览样式 --- */
.snake-preview-bg {
    background-color: var(--snake-bg);
    /* 网格背景 */
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 15px 15px; /* 网格大小 */
}

/* 静态贪吃蛇表示图 */
.snake-static-preview {
    width: 90%;
    height: 90%;
    position: relative;
}

.snake-body-static {
    position: absolute;
    left: 20%; /* 蛇开始的位置 */
    top: 40%;
    display: flex;
    flex-direction: row; /* 蛇是水平方向的 */
}

.snake-head-static {
    width: 16px;
    height: 16px;
    background-color: var(--snake-color);
    border-radius: 3px;
    position: relative;
}

.snake-tail {
    position: relative; /* 添加相对定位，使眼睛能相对于蛇尾定位 */
}

.snake-eye-left, .snake-eye-right {
    position: absolute;
    width: 3px;
    height: 3px;
    background-color: #000;
    border-radius: 50%;
    top: 4px;
}

.snake-eye-left {
    left: 3px;
}

.snake-eye-right {
    left: 10px;
}

.snake-segment-static {
    width: 16px;
    height: 16px;
    background-color: var(--snake-color);
    border-radius: 3px;
    margin-left: -1px; /* 使节段连接在一起，没有间隙 */
}

.snake-food-static {
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: var(--snake-food-color);
    border-radius: 50%;
    top: 40%;
    right: 25%;
    animation: snake-food-blink 1s ease-in-out infinite;
}

@keyframes snake-food-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px var(--snake-food-color);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 2px var(--snake-food-color);
    }
}

/* --- 俄罗斯方块预览样式 --- */
.tetris-preview-bg {
    background-color: var(--tetris-bg);
    padding: 10px;
}
.tetris-grid-preview {
    width: 120px; /* 预览区域宽度 */
    height: 180px; /* 预览区域高度 */
    position: relative;
    border: 1px solid var(--tetris-grid-line);
    background-image:
        linear-gradient(var(--tetris-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--tetris-grid-line) 1px, transparent 1px);
    background-size: 12px 12px; /* 单元格大小 */
}
.tetromino-preview {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(4, 10px); /* 假设最大4x4 */
    grid-template-rows: repeat(4, 10px);
    gap: 1px;
}
.tetromino-preview div { /* 小方块 */
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0,0,0,0.2);
}
/* 不同形状的方块 (简化示例，实际需要更多CSS来定义形状和颜色) */
.tetromino-preview.t-shape div:nth-child(1),
.tetromino-preview.t-shape div:nth-child(2),
.tetromino-preview.t-shape div:nth-child(3),
.tetromino-preview.t-shape div:nth-child(6) { background-color: #9b59b6; } /* 紫色T */

.tetromino-preview.l-shape div:nth-child(1),
.tetromino-preview.l-shape div:nth-child(5),
.tetromino-preview.l-shape div:nth-child(9),
.tetromino-preview.l-shape div:nth-child(10){ background-color: #e67e22; } /* 橙色L */

.tetromino-preview.i-shape div:nth-child(1),
.tetromino-preview.i-shape div:nth-child(2),
.tetromino-preview.i-shape div:nth-child(3),
.tetromino-preview.i-shape div:nth-child(4){ background-color: #3498db; } /* 蓝色I */

.tetromino-preview.o-shape div:nth-child(1),
.tetromino-preview.o-shape div:nth-child(2),
.tetromino-preview.o-shape div:nth-child(5),
.tetromino-preview.o-shape div:nth-child(6){ background-color: #f1c40f; } /* 黄色O */

.tetromino-preview.s-shape div:nth-child(2),
.tetromino-preview.s-shape div:nth-child(3),
.tetromino-preview.s-shape div:nth-child(5),
.tetromino-preview.s-shape div:nth-child(6){ background-color: #2ecc71; } /* 绿色S */


/* 俄罗斯方块下落动画 */
.falling-block {
    animation: tetrisFall 3s linear infinite;
    transform-origin: top center;
}
@keyframes tetrisFall {
    0% { transform: translateY(-30px) rotate(0deg); opacity: 1;}
    80% { transform: translateY(160px) rotate(720deg); opacity: 1;} /* 假设落到底部 */
    90% { transform: translateY(160px) rotate(720deg); opacity: 0.5;}
    100% { transform: translateY(160px) rotate(720deg); opacity: 0;}
}

/* --- 记忆翻牌预览样式 --- */
.memory-preview-bg {
    background-color: var(--memory-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.memory-card-preview-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 卡片预览 */
    gap: 10px;
    width: 140px; /* 控制整体大小 */
}
.memory-card-preview {
    width: 60px; /* 卡片大小 */
    height: 80px;
    perspective: 600px;
    cursor: default; /* 预览不可点击 */
}
.memory-card-preview-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-slow) ease;
    animation: memoryFlip 5s infinite ease-in-out;
}
.memory-card-preview:nth-child(2) .memory-card-preview-inner,
.memory-card-preview.flipped .memory-card-preview-inner { /* 保持第二张卡片翻开 */
    transform: rotateY(180deg);
    animation-delay: -2.5s; /* 错开动画 */
}
.memory-card-preview:nth-child(3) .memory-card-preview-inner {
    animation-delay: -1.25s;
}
.memory-card-preview:nth-child(4) .memory-card-preview-inner {
    animation-delay: -3.75s;
}

.memory-card-preview-front,
.memory-card-preview-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.memory-card-preview-front {
    background-color: var(--memory-card-front);
    color: var(--text-light);
}
.memory-card-preview-back {
    background-color: #fff;
    color: var(--accent-color);
    transform: rotateY(180deg);
}
.memory-card-preview-back i {
    font-size: 2rem;
    color: var(--memory-card-icon);
}
/* 确保图标颜色与背景有对比 */
.memory-card-preview-back .fa-star { color: #f1c40f; }
.memory-card-preview-back .fa-heart { color: #e74c3c; }
.memory-card-preview-back .fa-bolt { color: #3498db; }
.memory-card-preview-back .fa-cloud { color: #95a5a6; }


@keyframes memoryFlip {
    0%, 20% { transform: rotateY(0deg); } /* 显示正面 */
    30%, 70% { transform: rotateY(180deg); } /* 翻到背面 */
    80%, 100% { transform: rotateY(0deg); } /* 翻回正面 */
}


/* 团队展示区样式 */
.team-showcase {
    padding: var(--spacing-xl) 0;
    position: relative;
    min-height: 80vh; /* 减小高度，让页脚在页面底部显示 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1; /* 确保内容在背景之上 */
}

/* 团队展示区域遮罩，保持视觉一致性 */
.team-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
    z-index: -1;
}

/* 确保内容在最上层 */
.team-showcase .container {
    position: relative;
    z-index: 2;
}

.team-circle-container {
    position: relative;
    width: 600px;
    height: 600px;
    margin: var(--spacing-xl) auto;
}

/* 团队标志中心圆圈 */
.team-logo {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: pulse 2s infinite ease-in-out;
}

.team-logo i {
    font-size: 3rem;
    color: var(--text-light);
}

/* 团队成员卡片 */
.team-member {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-normal) ease, box-shadow var(--transition-normal) ease, background-color var(--transition-normal) ease;
    overflow: hidden;
    z-index: 5;
}

.team-member:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 20;
}

/* 添加彩色边框效果 */
.team-member::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    top: 0;
    left: 0;
    transition: border-color var(--transition-normal) ease;
}

.team-member:nth-child(2):hover::after { /* 注意：这里选择器可能需要根据实际HTML结构调整，如果team-logo是第一个子元素 */
    border-color: var(--primary-color);
}

.team-member:nth-child(3):hover::after { 
    border-color: var(--primary-color);
}

.team-member:nth-child(4):hover::after {
    border-color: var(--secondary-color);
}

.team-member:nth-child(5):hover::after {
    border-color: var(--accent-color);
}

.member-content {
    text-align: center;
    padding: var(--spacing-xs);
}

.member-content h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.member-content h3 small {
    font-size: 0.8em;
    opacity: 0.8;
    font-weight: normal;
}

.member-skills {
    font-size: 0.8rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal) ease, opacity var(--transition-normal) ease;
    opacity: 0;
}

.team-member:hover .member-skills {
    max-height: 100px;
    opacity: 1;
}

/* 技能标签样式 */
.skill-tag {
    display: inline-block;
    margin: 2px 0;
    padding: 3px 8px;
    border-radius: 12px;
    background-color: var(--secondary-color);
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 600;
    transform: scale(0.9);
    transition: transform var(--transition-fast) ease, background-color var(--transition-fast) ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skill-tag:nth-child(odd) {
    background-color: var(--primary-color);
}

.skill-tag:nth-child(even) {
    background-color: var(--accent-color);
}

.team-member:hover .skill-tag {
    transform: scale(1);
}

.skill-tag i {
    margin-right: 4px;
    font-size: 0.7rem;
}

/* 定位三个团队成员，假设 .team-logo 是第一个子元素 */
.team-circle-container > .team-member:nth-of-type(1) { /* 黄梓桉 */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.team-circle-container > .team-member:nth-of-type(2) { /* 邓凯 */
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.team-circle-container > .team-member:nth-of-type(3) { /* 黄景涛 */
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}


/* 装饰性外环 */
.team-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    border: 3px dashed var(--secondary-color);
    border-radius: 50%;
    animation: rotate 30s linear infinite;
}

/* 动画关键帧 */
@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(0, 188, 212, 0.4);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 0 0 10px rgba(0, 188, 212, 0);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(0, 188, 212, 0);
    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 页脚样式 */
.footer {
    background-color: rgba(0, 0, 0, 0.7); /* 更深的半透明背景 */
    color: var(--text-light);
    padding: var(--spacing-md) 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 添加微妙的分隔线 */
    position: relative;
    z-index: 2; /* 确保在遮罩层上方 */
}

.footer a {
    color: var(--secondary-color);
}

.footer a:hover {
    text-decoration: underline;
}

/* 游戏详情页样式 */
.game-details {
    padding-top: 100px; /* 为导航栏腾出空间 */
}

.game-container {
    background-color: white;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--spacing-lg);
}

.game-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.game-header h1 {
    margin-bottom: 0;
}

.back-btn {
    margin-right: var(--spacing-sm);
}

.game-description {
    margin-bottom: var(--spacing-md);
}

.game-frame {
    width: 100%;
    height: 500px;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--background-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.game-frame p {
    color: #666;
    text-align: center;
}

.game-controls {
    background-color: var(--background-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
}

.game-controls h3 {
    margin-bottom: var(--spacing-xs);
}

/* 响应式设计 */
@media (max-width: 992px) {
    .team-circle-container {
        width: 500px;
        height: 500px;
    }
    
    .team-ring {
        width: 380px;
        height: 380px;
    }
    
    .team-member {
        width: 130px;
        height: 130px;
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .menu-toggle {
        display: flex;
        width: 25px;
        height: 20px;
    }
    
    .menu-toggle span {
        height: 2px;
    }
    
    .nav-links {
        position: fixed; /* 改为fixed而不是absolute，确保滚动时仍然可见 */
        top: 60px; /* 导航栏高度 */
        left: 0;
        width: 100%;
        height: 0;
        background-color: var(--primary-color);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
        overflow: hidden;
        transition: height var(--transition-normal) ease, padding var(--transition-normal) ease;
        z-index: 1000;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    
    .nav-links.active {
        height: auto;
        padding: var(--spacing-md) 0;
    }
    
    .nav-links li {
        margin: var(--spacing-sm) 0;
        width: 100%;
        text-align: center;
    }
    
    .nav-links a {
        display: block;
        padding: var(--spacing-xs) 0;
        width: 100%;
    }
    
    /* 修改团队展示部分，保持圆形布局，整体缩小 */
    .team-circle-container {
        width: 450px;
        height: 450px;
        transform: scale(0.9);
        margin: var(--spacing-lg) auto; /* 确保在较小屏幕上仍然居中 */
    }
    
    .team-ring {
        width: 340px;
        height: 340px;
    }
    
    .team-member {
        /* 保持原有的绝对定位和变换效果 */
        width: 130px;
        height: 130px;
    }
    
    .game-image { 
        height: 200px; /* 稍微调整高度，不要减小太多 */
    }
    
    /* 确保预览内容的比例和位置在移动端保持正确 */
    .snake-static-preview, .tetris-grid-preview, .memory-card-preview-wrapper {
        transform: scale(0.95); /* 轻微缩小整体比例 */
    }
    
    /* 确保hero区域在移动设备上有足够高度 */
    .hero {
        min-height: 100vh;
        height: auto;
        padding-top: 80px; /* 增加顶部padding，确保内容不被导航栏遮挡 */
        padding-bottom: var(--spacing-lg);
    }

    .github-link {
        margin: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: var(--spacing-sm);
    }
    
    .github-link a {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 调整技能标签样式，确保在移动端也能正常显示 */
    .member-skills {
        font-size: 0.65rem; /* 稍微增大字体，提高可读性 */
        max-width: 100px; /* 增加宽度，减少文本截断 */
    }
    
    .skill-tag {
        padding: 2px 6px; /* 增加内边距，使标签更易触摸 */
        font-size: 0.65rem;
        margin: 3px 2px; /* 增加外边距，防止标签挤在一起 */
        display: inline-block; /* 保持水平排列 */
    }
    
    /* 增强触摸体验 */
    .team-member:hover .member-skills,
    .team-member:active .member-skills {
        max-height: 100px;
        opacity: 1;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .hero-btns {
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    
    .hero-btns .btn {
        width: 100%; /* 让按钮占满宽度 */
        margin-bottom: var(--spacing-xs);
        padding: var(--spacing-sm); /* 增加按钮高度，更容易点击 */
    }
    
    .games-grid {
        grid-template-columns: 1fr;
    }
    
    .game-frame {
        height: 300px;
    }
    
    .game-image { 
        height: 180px; /* 适当减小但保持合理比例 */
    }
    
    /* 更小屏幕上调整团队展示部分，仍然保持圆形布局 */
    .team-circle-container {
        width: 350px;
        height: 350px;
        transform: scale(0.8);
        margin: var(--spacing-md) auto; /* 减少外边距以适应较小空间 */
    }
    
    .team-ring {
        width: 260px;
        height: 260px;
    }
    
    .team-member {
        width: 110px;
        height: 110px;
    }
    
    /* 记忆卡片游戏预览优化 */
    .memory-card-preview-wrapper {
        width: 130px; /* 稍微调整宽度 */
        transform: scale(0.9); /* 整体缩小 */
    }
    
    .memory-card-preview {
        width: 55px;
        height: 75px;
    }
    
    /* 俄罗斯方块预览优化 */
    .tetris-grid-preview {
        width: 110px;
        height: 160px;
        transform: scale(0.85);
        background-size: 11px 11px;
    }
    
    .tetromino-preview {
        grid-template-columns: repeat(4, 9px);
        grid-template-rows: repeat(4, 9px);
    }
    
    .tetromino-preview div {
        width: 9px;
        height: 9px;
    }
    
    /* 贪吃蛇预览优化 */
    .snake-static-preview {
        transform: scale(0.85);
    }
    
    /* 确保成员内容居中且紧凑 */
    .member-content {
        padding: 5px 3px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 在小屏幕设备上为团队成员调整字体大小 */
    .team-member .member-content h3 {
        font-size: 0.9rem;
        margin-bottom: 3px;
        white-space: nowrap; /* 防止名字换行 */
    }
    
    .team-member .member-content h3 small {
        font-size: 0.75em;
    }
    
    /* 调整技能标签在小屏幕上的显示 */
    .member-skills {
        font-size: 0.6rem;
        max-width: 90px;
        margin: 0 auto;
        max-height: 0;
        transition: max-height var(--transition-normal) ease, opacity var(--transition-normal) ease;
    }
    
    .team-member:hover .member-skills,
    .team-member:active .member-skills,
    .team-member:focus .member-skills {
        max-height: 100px;
        opacity: 1;
    }
    
    /* 垂直排列技能标签，提高可读性 */
    .skill-tag {
        padding: 2px 5px;
        font-size: 0.6rem;
        display: block; /* 垂直排列 */
        margin: 3px auto;
        width: fit-content;
        white-space: nowrap; /* 防止标签文字换行 */
    }
    
    .team-member:hover .skill-tag,
    .team-member:active .skill-tag {
        transform: scale(1);
    }
    
    /* 改善触摸反馈 */
    .skill-tag:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
    
    /* 优化页脚在小屏幕上的显示 */
    .footer {
        padding: var(--spacing-sm) 0;
        font-size: 0.9rem;
    }
    
    /* 确保section title在小屏幕上不会过大 */
    .section-title {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-md);
    }
}

@media (max-width: 375px) {
    .hero h1 {
        font-size: 1.5rem;
        letter-spacing: -0.5px;
    }
    
    /* 更小屏幕上微调菜单按钮 */
    .menu-toggle {
        width: 22px;
        height: 18px;
    }
    
    .menu-toggle span {
        height: 1.5px;
    }
    
    .team-circle-container {
        width: 300px;
        height: 300px;
        transform: scale(0.7);
        overflow: visible; /* 确保内容不被裁剪 */
    }
    
    .team-member {
        width: 100px;
        height: 100px;
    }
    
    .team-logo {
        width: 80px;
        height: 80px;
    }
    
    .team-logo i {
        font-size: 2rem;
    }
    
    .game-image {
        height: 160px; /* 在最小屏幕上保持合理高度 */
    }
    
    .typewriter-container {
        font-size: 1rem;
    }
    
    /* 减小游戏卡片内容的字体大小 */
    .game-content h3 {
        font-size: 1.3rem;
    }
    
    .game-content p {
        font-size: 0.9rem;
    }
    
    /* 优化技能标签在超小屏幕上的显示 */
    .member-skills {
        font-size: 0.55rem;
        max-width: 85px; /* 增加宽度，确保内容正常显示 */
    }
    
    .skill-tag {
        padding: 2px 4px;
        font-size: 0.55rem;
        margin: 2px auto;
    }
    
    /* 优化超小屏幕成员名称显示 */
    .team-member .member-content h3 {
        font-size: 0.85rem;
    }
    
    /* 进一步优化各游戏预览比例 */
    .snake-static-preview {
        transform: scale(0.8);
    }
    
    .tetris-grid-preview {
        transform: scale(0.75);
    }
    
    .memory-card-preview-wrapper {
        transform: scale(0.8);
    }
    
    /* 确保预览内容居中 */
    .preview-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 添加适配横屏模式的样式 */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: auto;
        min-height: 450px;
        padding: 80px 0 var(--spacing-md);
    }
    
    /* 横屏模式下也保持圆形布局，但整体缩小 */
    .team-circle-container {
        width: 350px;
        height: 350px;
        transform: scale(0.75);
    }
    
    .team-ring {
        width: 260px;
        height: 260px;
    }
    
    .team-member {
        width: 100px;
        height: 100px;
    }
}

/* 动画效果样式 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform; /* 优化动画性能 */
}

.slide-in {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform; /* 优化动画性能 */
}

.fade-in.visible, .slide-in.visible {
    opacity: 1;
    transform: translate(0);
}

.text-center {
    text-align: center;
}

/* 打字机效果样式 */
.typewriter-container {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    min-height: 3.2rem; /* 固定高度防止文本变化时布局跳动 */
    display: flex;
    align-items: center;
    justify-content: center;
}

#typewriter-text {
    position: relative;
    white-space: pre-wrap; /* 确保换行符被正确处理 */
    word-break: break-word; /* 允许在单词内换行 */
}

#typewriter-text::after {
    content: '|';
    position: absolute;
    color: var(--text-light);
    animation: cursor-blink 0.8s infinite;
}

@keyframes cursor-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* 添加外部容器样式 */
.typewriter-outer-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    height: auto;
    position: relative;
}

/* 团队描述打字机效果样式 */
.team-typewriter {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    height: 7.2rem; /* 改为固定高度，确保足够容纳四行文本 */
    background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 防止内容溢出 */
}

#team-typewriter-text {
    position: relative;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.8;
    display: inline-block;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* 文字阴影提高可读性 */
    font-weight: 500;
    width: 100%; /* 确保文本占用整个宽度 */
}

/* 添加彩色文字效果，每行使用不同的颜色 */
#team-typewriter-text span:nth-child(1) {
    color: #d8b5ff; /* 浅紫色，替换原来的深蓝色 */
    text-shadow: 0 0 8px rgba(216, 181, 255, 0.5); /* 添加轻微发光效果 */
}

#team-typewriter-text span:nth-child(2) {
    color: #16a3b7; /* 青色 */
    text-shadow: 0 0 8px rgba(22, 163, 183, 0.5);
}

#team-typewriter-text span:nth-child(3) {
    color: #ffb74d; /* 橙色 */
    text-shadow: 0 0 8px rgba(255, 183, 77, 0.5);
}

#team-typewriter-text span:nth-child(4) {
    color: #3366cc; /* 蓝色 */
    text-shadow: 0 0 8px rgba(51, 102, 204, 0.5);
}

#team-typewriter-text::after {
    content: '|';
    position: absolute;
    color: #ffb74d; /* 改变光标颜色与文字协调 */
    animation: cursor-blink 0.8s infinite;
}

/* 彩色文本效果 */
.color-primary {
    color: var(--primary-color);
}

.color-secondary {
    color: var(--secondary-color);
}

.color-accent {
    color: var(--accent-color);
}

/* 确保文本在所有设备上正确显示 */
@media (max-width: 576px) {
    .team-typewriter {
        height: 9rem; /* 在小屏幕上增加固定高度 */
    }
}

/* 页面加载时的过渡效果 */
.page-transition {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.page-transition.loaded {
    opacity: 1;
}

/* 触摸设备支持 */
@media (hover: none) {
    /* 在不支持悬停的设备上确保触摸时显示技能 */
    .team-member:active .member-skills {
        max-height: 100px;
        opacity: 1;
        transition-delay: 0s; /* 移除延迟，立即显示 */
    }
    
    .team-member:active {
        transform: scale(1.05);
        z-index: 100; /* 确保活动项在顶层 */
    }
    
    .team-member:active .skill-tag {
        transform: scale(1);
        transition-delay: 0s; /* 移除延迟，立即显示 */
    }
}

.touch-hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

.team-member.touch-hover .member-skills {
    max-height: 100px;
    opacity: 1;
}

.skill-tag.touch-hover {
    transform: scale(1);
}

/* 游戏详情页样式 */
.game-header h1 {
    font-size: 2.2rem;
}

.game-description p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.team-showcase .section-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.team-showcase .section-title::after {
    background-color: var(--accent-color);
}

/* 确保打字机文字在暗背景上清晰可见 */
#team-typewriter-text span:nth-child(1) {
    color: #d8b5ff; /* 浅紫色，替换原来的深蓝色 */
    text-shadow: 0 0 8px rgba(216, 181, 255, 0.5); /* 添加轻微发光效果 */
}

#team-typewriter-text span:nth-child(2) {
    color: #16a3b7; /* 青色 */
    text-shadow: 0 0 8px rgba(22, 163, 183, 0.5);
}

#team-typewriter-text span:nth-child(3) {
    color: #ffb74d; /* 橙色 */
    text-shadow: 0 0 8px rgba(255, 183, 77, 0.5);
}

#team-typewriter-text span:nth-child(4) {
    color: #3366cc; /* 蓝色 */
    text-shadow: 0 0 8px rgba(51, 102, 204, 0.5);
}

/* 添加全屏背景容器 */
.page-background {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(rgba(255,255,255,1) 0%, 
                               rgba(255,255,255,0.8) 30%, 
                               rgba(255,255,255,0) 100%);
}

/* 底部背景图片 */
.page-background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/team-background.png');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1;
}