body {
    color: #fff;
    overflow-x: hidden;
}

/* ---------- HEADER ---------- */
header {
    background: #1e2230;
    border-bottom: 2px solid #ff004c;
    padding: 10px 25px;
}
header h5 { font-family: 'Orbitron', sans-serif; }

/* ---------- GAME AREA ---------- */
.game-area {
    text-align: center;
    background: radial-gradient(circle at center, #1e2230 0%, #0f111a 100%);
    border-radius: 15px;
    padding: 40px 20px;
    margin-top: 30px;
    box-shadow: 0 0 20px #1e2230;
}

.dice {
    width: 80px;
    height: 80px;
    margin: 15px;
    transition: transform 0.2s;
}

.dice.rolling {
    animation: roll 0.6s linear infinite;
}

@keyframes roll {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

.result-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    margin-top: 15px;
}

/* ---------- BET OPTIONS ---------- */
.bet-options button {
    width: 100%;
    background: linear-gradient(135deg, #ff004c, #ffd600);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.2s;
}
.bet-options button.active {
    box-shadow: 0 0 20px #ffd600;
    transform: scale(1.05);
}

.btn-custom {
    background: linear-gradient(135deg, #ff004c, #ffd600);
    border: none;
    color: #fff;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-custom:hover { transform: scale(1.05); }

/* ---------- AUTO BET ---------- */
.auto-controls {
    background: #1e2230;
    border-radius: 15px;
    padding: 15px;
    margin-top: 25px;
}

/* ---------- HISTORY ---------- */
.history {
    background: #1e2230;
    border-radius: 15px;
    padding: 15px;
    margin-top: 25px;
}