/* === БАЗОВЫЕ НАСТРОЙКИ (ТВОИ ОРИГИНАЛЬНЫЕ) === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar {
    background: linear-gradient(90deg, #ff00ff, #00ffff);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    width: 100%;
}

.game-chooser {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    margin-bottom: 5%; 
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.balance-badge {
    background: rgba(0, 255, 255, 0.1); border: 1px solid #00ffff;
    padding: 5px 15px; border-radius: 20px; color: #00ffff; font-weight: bold;
}

.nav-link { color: white; text-decoration: none; font-weight: 500; }

/* === КОНТЕЙНЕРЫ === */
.main-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    width: 100%;
}

.neon-card {
    background-color: #0f0f0f;
    width: 100%;
    max-width: 1300px;
    padding: 20px;
    border: 2px solid #00ffff;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
}

.neon-card:not(:has(.roulette-container)) {
    max-width: 100%;
    text-align: center;
}

.neon-text {
    margin-bottom: 30px;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff;
}

.form-group { margin-bottom: 20px; text-align: left; }
.form-label { display: block; margin-bottom: 8px; color: #00ffff; font-size: 0.9rem; text-transform: uppercase; }
.neon-input {
    width: 100%; padding: 12px 15px; background: #1a1a1a; border: 1px solid #ff00ff;
    border-radius: 5px; color: #fff; outline: none; transition: 0.3s;
}
.neon-input:focus { border-color: #00ffff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }

.alert {
    padding: 10px; border-radius: 5px; background: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff0000; color: #ffcccc; margin-bottom: 20px;
}

/* === РУЛЕТКА: СЕТКА И ГРАФИКА === */
.roulette-container {
    display: grid; 
    grid-template-columns: 1fr 520px;
    grid-template-areas: "bets wheel";
    gap: 30px;
    width: 100%;
}

.roulette-left { grid-area: bets; display: flex; flex-direction: column; gap: 20px; }
.roulette-right { 
    grid-area: wheel; display: flex; justify-content: center; 
    align-items: center; position: sticky; top: 20px; 
}

.wheel-wrapper { position: relative; width: 500px; height: 500px; }
.wheel-outer {
    width: 100%; height: 100%; border-radius: 50%; border: 10px solid #222;
    background: url('/static/img/roulette-wheel.png') center/cover;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
    transition: transform 7s cubic-bezier(0.25, 0, 0.25, 1);
}

.wheel-pointer {
    width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; 
    border-top: 35px solid #00ffff; position: absolute; top: -15px; left: 50%; 
    transform: translateX(-10%); z-index: 10;
}

/* Таблица ставок */
.bet-table {
    display: flex; gap: 3px; background: #111; padding: 10px;
    border-radius: 8px; border: 2px solid #333; overflow-x: auto;
    width: 100%;
}

.zero-sector { 
    width: 50px; background: #080; display: flex; align-items: center; 
    justify-content: center; cursor: pointer; border-radius: 4px; font-weight: bold; position: relative;
}

.numbers-grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(3, 45px);
    grid-auto-flow: column; 
    gap: 3px; 
    flex: 1;
}

.num-slot { 
    width: 100%; min-width: 35px; height: 45px; display: flex; align-items: center; justify-content: center; 
    cursor: pointer; border-radius: 4px; font-weight: bold; position: relative; font-size: 0.9rem;
}
.num-red { background: #b00; } 
.num-black { background: #222; }

/* Кнопки и Чипсы */
.btn-neon {
    width: 100%; padding: 15px; background: linear-gradient(45deg, #ff00ff, #00ffff);
    border: none; border-radius: 5px; color: white; font-weight: bold;
    text-transform: uppercase; cursor: pointer; box-shadow: 0 0 15px rgba(255, 0, 255, 0.6);
}

.special-bets { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bet-option { 
    padding: 10px 20px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    background: #1a1a1a; 
    border: 2px solid #333; 
    transition: 0.2s;
    position: relative; /* Оставляем, чтобы чип был привязан к кнопке */
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-bet { background: #b00; border-color: #f00; }
.black-bet { background: #222; border-color: #444; }

.chip {
    position: absolute;
    /* Для обычных ячеек чисел оставляем в углу */
    top: -8px;
    right: -8px;
    background: #00ffff;
    color: #000;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 0 10px #000;
    z-index: 10;
    font-weight: 900;
    pointer-events: none; /* Чтобы фишка не мешала кликать повторно */
}

.bet-option .chip {
    top: 10%;
    right: -10px; /* Сдвигаем внутрь кнопки справа */
    transform: translateY(-50%); /* Центрируем по вертикали */
}

.bet-controls { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.step-btn { 
    background: #111; border: 1px solid #00ffff; color: #00ffff; 
    padding: 5px 12px; cursor: pointer; border-radius: 4px; font-weight: bold;
}
.step-btn.active { background: #00ffff; color: #000; }

/* === АДАПТИВНОСТЬ (МОБИЛКИ) === */
@media (max-width: 1100px) {
    .roulette-container {grid-template-columns: 1fr; grid-template-areas: "wheel" "bets";}
    .roulette-right { position: static; margin-bottom: 30px; order: -1; }
    .wheel-wrapper { width: 300px; height: 300px; margin: 0 auto; }
    .neon-card { padding: 15px; }
    .btn-neon {width: 100%; padding: 5px; border-radius: 3px; font-size: 8pt; cursor: pointer; box-shadow: 0 0 5px rgba(255, 0, 255, 0.6);}
    .game-chooser {margin-top: 10px; display: flex; gap: 10px; margin-bottom: 10%;}
    .navbar {
        background: linear-gradient(90deg, #ff00ff, #00ffff);
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
        width: 100%;
    }
    .navbar-brand {
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
        text-decoration: none;
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
}

@media (max-width: 600px) {
    .nav-links {
        width: 100%;
        justify-content: center;
        font-size: 0.8rem;
        gap: 10px;
    }
    .num-slot { min-width: 30px; height: 40px; }
}