:root {
    --bg: #0F212E;
    --card-bg: #1A2C38;
    --text: #B1BAD3;
    --accent: #00E701;
    --red: #F12C4C;
    --gold: #F5A623;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; }
.navbar { background: #0B1B27; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8rem; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: 3px; }
.balance { background: var(--card-bg); padding: 0.5rem 1rem; border-radius: 8px; color: var(--accent); font-weight: bold; }
.btn { padding: 10px 20px; border-radius: 10px; font-weight: bold; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: transform 0.2s; }
.btn-green { background: var(--accent); color: #0F212E; }
.btn-red { background: var(--red); color: #fff; }
.btn-outline { border: 2px solid var(--text); color: var(--text); background: transparent; }
.auth-card { max-width: 400px; margin: 2rem auto; background: var(--card-bg); padding: 2rem; border-radius: 20px; }
input, select { width: 100%; padding: 12px; margin: 8px 0; background: #0F212E; border: 1px solid #2D4555; border-radius: 8px; color: #fff; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 1rem; }
.game-card { background: var(--card-bg); border-radius: 15px; overflow: hidden; text-decoration: none; color: #fff; transition: transform 0.2s; }
.game-card:hover { transform: translateY(-5px); }
.game-card img { width: 100%; height: 120px; object-fit: cover; }
.game-card span { display: block; padding: 0.5rem; text-align: center; font-weight: bold; }