body { font-family: Arial, sans-serif; margin:0; padding:0; }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#333; color:#fff; }
header input { padding:5px; width:200px; }
header select { padding:5px; margin-left:10px; }
nav { padding:10px 20px; background:#f2f2f2; }
nav button { margin-right:5px; padding:5px 10px; }
#game-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:15px; padding:20px; }
.game-card { border:1px solid #ddd; border-radius:10px; overflow:hidden; text-align:center; }
.game-card img { width:100%; display:block; }
.game-card h3 { margin:5px 0; }
.game-card p { color:#666; margin-bottom:10px; }
.back-btn { color:#333; text-decoration:none; padding:10px; display:inline-block; }
main iframe { border:1px solid #ccc; border-radius:10px; }
@media(max-width:600px){#game-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}}
.game-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: #333;
    color: white;
}

.btn-home {
    padding: 6px 12px;
    background: #ffcc00;
    color: #333;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}
/* 自动跟随系统深色模式 */
:root {
    --bg: #ffffff;
    --text: #111111;
    --card: #f2f2f2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111111;
        --text: #eeeeee;
        --card: #1e1e1e;
    }
}

/* 用户切换深色模式时覆盖 */
.dark-mode {
    --bg: #111111;
    --text: #eeeeee;
    --card: #1e1e1e;
}

html, body {
    background: var(--bg);
    color: var(--text);
}

/* 深色按钮 */
.theme-toggle {
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 1000;
    background: var(--card);
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: var(--text);
}