body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #121212; color: white; text-align: center; margin: 0; padding: 0; }

/* Login scherm */
#login-screen { margin-top: 100px; padding: 20px; }
#login-screen input { font-size: 18px; padding: 10px; border-radius: 5px; border: none; }

/* Game scherm */
.header { background: #1f1f1f; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #333; }
.saldo-box { font-weight: bold; color: #4caf50; font-size: 1.2em; }

#status-message { margin: 20px; font-weight: bold; font-size: 1.1em; padding: 10px; background: #333; border-radius: 5px; }

.horse-card { 
    background: #2c2c2c; padding: 15px; margin: 10px 20px; border-radius: 8px; 
    display: flex; justify-content: space-between; align-items: center; 
    border: 1px solid #444; 
}
.horse-info { display: flex; flex-direction: column; text-align: left; }
.odds { color: #ffd700; font-weight: bold; font-size: 0.9em; }

input[type="radio"] { transform: scale(1.5); }

.input-group { margin: 20px; padding: 20px; background: #1f1f1f; border-top: 1px solid #333; }

button { background: #007bff; color: white; border: none; padding: 12px 20px; border-radius: 5px; font-size: 16px; margin-top: 10px; width: 100%; cursor: pointer; transition: background 0.3s; }
button:hover { background: #0056b3; }
button:disabled { background: #555; cursor: not-allowed; }

input[type="number"] { padding: 10px; width: 60%; border-radius: 5px; border: none; font-size: 16px; text-align: center; }

.blinking { animation: blinker 1s linear infinite; color: #ff4444; background: #3a0000 !important; }
@keyframes blinker { 50% { opacity: 0.5; } }