* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 30px 15px;
}
.container { max-width: 900px; margin: 0 auto; }
.header { text-align: center; color: white; margin-bottom: 40px; }
.header h1 { font-size: 36px; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.header p { font-size: 16px; opacity: 0.85; }

.section { margin-bottom: 40px; }
.section-title {
    color: white;
    font-size: 22px;
    margin-bottom: 16px;
    padding-left: 12px;
    border-left: 4px solid #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Classic games grid (from game/index.html) */
.classic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.classic-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: block;
}
.classic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.classic-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.classic-card .card-body {
    padding: 10px 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

/* New games grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.game-card {
    background: white;
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.game-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.game-icon { font-size: 40px; margin-bottom: 10px; display: block; }
.game-name { font-size: 15px; font-weight: 600; color: #333; display: block; }
.game-tag { font-size: 11px; color: #999; margin-top: 4px; display: block; }

.game-card.mine     { border-left: 4px solid #607D8B; }
.game-card.gomoku   { border-left: 4px solid #795548; }
.game-card.memory   { border-left: 4px solid #9C27B0; }
.game-card.breakout { border-left: 4px solid #E91E63; }
.game-card.g2048    { border-left: 4px solid #F9A825; }
.game-card.tetris   { border-left: 4px solid #9B59B6; }
.game-card.pushbox  { border-left: 4px solid #4CAF50; }
.game-card.snake    { border-left: 4px solid #FF6B6B; }
.game-card.fc       { border-left: 4px solid #e94560; }
.game-card.sudoku   { border-left: 4px solid #0984e3; }

.footer { text-align: center; color: rgba(255,255,255,0.5); font-size: 12px; margin-top: 40px; }