@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

/* === GLOBAL RESET === */
* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: #0f1219;
    color: white;
    font-family: 'Inter', sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #161922; }
::-webkit-scrollbar-thumb { background: #2a2e39; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

.hidden { display: none !important; }

/* === NOTIFICATIONS === */
#notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none; 
}

.notify-item {
    background: rgba(22, 25, 34, 0.95);
    backdrop-filter: blur(8px);
    border-left: 4px solid #3b82f6;
    padding: 15px 20px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    cursor: pointer;
    animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    position: relative;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.2s, opacity 0.2s;
}
.notify-item:hover {
    background: #1e222d;
    transform: scale(1.02);
}

@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes popOut { to { transform: scale(0.8); opacity: 0; } }

.notify-item i { font-size: 18px; }
.notify-success { border-color: #10b981; } .notify-success i { color: #10b981; }
.notify-error { border-color: #ef4444; } .notify-error i { color: #ef4444; }
.notify-warning { border-color: #fbbf24; } .notify-warning i { color: #fbbf24; }

/* === LAYOUT === */
.sidebar {
    width: 250px;
    background: #161922;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-right: 1px solid #2a2e39;
    z-index: 100;
}

.brand {
    display: flex;
    justify-content: center;
    margin-left: -70px;
    align-items: center;
    padding: 0px 0 5px 0;
    cursor: pointer;
}

.logo-img {
    width: 120px;
    height: auto;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.logo-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; color: #8b92a1; text-decoration: none; border-radius: 8px; margin-bottom: 5px; font-weight: 600; transition: 0.2s; cursor: pointer; }
.menu-item:hover { background: #232732; color: white; }
.submenu { display: none; flex-direction: column; padding-left: 20px; margin-bottom: 10px; }
.submenu a { color: #6b7280; text-decoration: none; padding: 8px; display: block; font-size: 14px; cursor: pointer; transition: 0.2s; }
.submenu a:hover { color: #3b82f6; }

.main-wrapper { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; }
main { 
    padding: 30px; 
    flex: 1; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; /* Выстраиваем элементы сверху вниз */
    align-items: center;    /* Центрируем игры по горизонтали */
    justify-content: flex-start; 
    gap: 60px; /* Гарантированный отступ между игрой и подвалом */
}

/* === HEADER === */
header { height: 60px; background: #0f1219; border-bottom: 1px solid #2a2e39; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.header-left { display: flex; align-items: center; gap: 20px; }
.lang-select { background: #1e222d; padding: 6px 12px; border-radius: 6px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; border: 1px solid #2a2e39; }
.top-nav { display: flex; gap: 15px; }
.top-nav a { color: #8b92a1; text-decoration: none; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: 0.2s; }
.top-nav a:hover { color: white; }
.header-right { display: flex; align-items: center; gap: 15px; }
.balance-display { background: #1e222d; padding: 6px 12px; border-radius: 6px; font-weight: 800; color: white; font-size: 14px; border: 1px solid #2a2e39; display: flex; align-items: baseline; gap: 1px; }
.balance-display .cents { color: #6b7280; font-size: 0.85em; font-weight: 700; }
.currency { color: #3b82f6; margin-left: 4px; }
.btn-deposit-new { background: linear-gradient(90deg, #10b981, #059669); color: white; border: none; padding: 8px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); transition: 0.2s; }
.btn-deposit-new:hover { background: linear-gradient(90deg, #059669, #047857); }
.profile-container { position: relative; }
.profile-icon { width: 35px; height: 35px; background: #232732; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8b92a1; transition: 0.2s; }
.profile-icon:hover { background: #3b82f6; color: white; }
.profile-dropdown { position: absolute; top: 45px; right: 0; width: 220px; background: #1e222d; border: 1px solid #2a2e39; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.8); overflow: hidden; z-index: 1000; display: flex; flex-direction: column; }
.profile-dropdown a { padding: 12px 15px; color: #ccc; text-decoration: none; font-size: 13px; display: flex; align-items: center; gap: 10px; transition: 0.2s; border-bottom: 1px solid #232732; }
.profile-dropdown a:hover { background: #232732; color: white; }

/* === PROMO SECTION === */
.promo-banner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 900px; padding-top: 20px; }
.promo-text h1 { font-size: 48px; font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.gradient-text { background: linear-gradient(90deg, #3b82f6, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.promo-text p { color: #9ca3af; max-width: 500px; margin-bottom: 30px; }
.promo-buttons { display: flex; gap: 15px; }
.big { padding: 15px 30px; font-size: 16px; border-radius: 8px; cursor: pointer; font-weight: bold; border: none; }
.btn-primary { background: linear-gradient(90deg, #3b82f6, #2563eb); color: white; }
.btn-secondary { background: #1f2937; color: white; border: 1px solid #374151; }
.promo-visual { position: relative; font-size: 150px; color: #fbbf24; text-shadow: 0 0 50px rgba(251, 191, 36, 0.3); }
.bonus-badge { position: absolute; top: 50%; left: -20px; background: #7c3aed; color: white; font-size: 18px; padding: 20px; border-radius: 50%; font-weight: bold; transform: rotate(-15deg); box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); border: 4px solid #0f1219; }

/* === UP-X LAYOUT (Roulette layout) === */
.upx-layout-fixed-left { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start; width: 100%; height: 750px; gap: 60px; margin-left: 0 !important; margin-right: auto !important; padding-left: 0 !important; }
.upx-bets-panel { width: 320px; min-width: 320px; display: flex; flex-direction: column; gap: 15px; flex-shrink: 0; }
.bet-card { background: #0e1016; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; border-left: 4px solid transparent; box-shadow: 0 4px 20px rgba(0,0,0,0.4); max-height: 240px; min-height: 150px; flex: 1; }
.card-red { border-left-color: #ff1f1f; }
.card-black { border-left-color: #5c6b7f; }
.card-green { border-left-color: #00ff88; }
.bc-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: linear-gradient(90deg, #151820 0%, #0e1016 100%); border-bottom: 1px solid #1e222d; flex-shrink: 0; }
.bc-title { font-size: 11px; font-weight: 800; color: #8b92a1; display: flex; align-items: center; gap: 8px; }
.neon-dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-red { background: #ff1f1f; box-shadow: 0 0 8px #ff1f1f; }
.dot-black { background: #5c6b7f; box-shadow: 0 0 8px #5c6b7f; }
.dot-green { background: #00ff88; box-shadow: 0 0 8px #00ff88; }
.bc-total { font-size: 11px; color: white; font-weight: bold; }
.bc-list { flex: 1; overflow-y: auto; padding: 5px 0; max-height: 200px; }
.bc-list::-webkit-scrollbar { width: 4px; }
.bc-list::-webkit-scrollbar-track { background: #12141a; }
.bc-list::-webkit-scrollbar-thumb { background: #2a2e39; border-radius: 2px; }
.bet-row-glow { display: flex; justify-content: space-between; padding: 5px 15px; font-size: 12px; color: #9ca3af; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.02); animation: slideInLeft 0.3s ease; }
@keyframes slideInLeft { from {opacity:0; transform: translateX(-10px);} to {opacity:1; transform: translateX(0);} }
.bet-row-glow.my-bet { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border-left: 2px solid #3b82f6; }

.upx-game-panel { width: 800px; max-width: 100%; background: radial-gradient(circle at 50% 30%, #1a1f2e 0%, #090b10 80%); border-radius: 20px; border: 1px solid #1e232e; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
.history-strip { height: 55px; display: flex; align-items: center; padding: 0 20px; background: rgba(15, 18, 25, 0.7); backdrop-filter: blur(5px); border-bottom: 1px solid #1e232e; z-index: 10; }
.hs-icon { color: #4b5563; margin-right: 15px; }
.hs-list { display: flex; gap: 8px; }
.badge-glow { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.bg-red { background: #ff1f1f; color: white; box-shadow: 0 0 10px rgba(255, 31, 31, 0.4); }
.bg-black { background: #2d3748; color: white; border: 1px solid #4a5568; }
.bg-green { background: #00ff88; color: black; box-shadow: 0 0 10px rgba(0, 255, 136, 0.4); }

.wheel-stage-glow { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 20px; min-height: 500px; }
.ambient-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(124, 58, 237, 0.02) 60%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.orbit-ring { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.ring-1 { width: 490px; height: 490px; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3); opacity: 0.6; }
.ring-1::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: #3b82f6; border-left-color: #3b82f6; opacity: 0.5; transform: rotate(-45deg); }
.ring-2 { width: 560px; height: 560px; border: 1px dashed rgba(255, 255, 255, 0.05); }
.wheel-container-glow { width: 420px; height: 420px; position: relative; z-index: 5; filter: drop-shadow(0 20px 50px rgba(0,0,0,0.8)); }
#roulette-svg { width: 100%; height: 100%; transform-origin: center; }
.wheel-rotator { transform-origin: center; filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8)); }
.pointer-container { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 20; width: 40px; height: 40px; display: flex; justify-content: center; }
.pointer-body { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #fbbf24; filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.8)); position: relative; z-index: 2; }
.pointer-glow-effect { position: absolute; top: -10px; width: 30px; height: 30px; background: rgba(251, 191, 36, 0.3); filter: blur(10px); border-radius: 50%; z-index: 1; }
.center-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 130px; height: 130px; background: #0b0d12; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 15; box-shadow: inset 0 0 40px #000, 0 0 0 6px #161922; transition: box-shadow 0.3s, border-color 0.3s}

.center-hub.hub-red { box-shadow: inset 0 0 40px #ef4444, 0 0 0 6px #161922; border-color: #ef4444; }
.center-hub.hub-green { box-shadow: inset 0 0 40px #10b981, 0 0 0 6px #161922; border-color: #10b981; }
.center-hub.hub-black { box-shadow: inset 0 0 40px #2d3748, 0 0 0 6px #161922; border-color: #4a5568; }

.hub-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(59, 130, 246, 0.2); }
.hub-content { text-align: center; z-index: 5; }
.hub-timer { font-size: 32px; font-weight: 900; color: white; text-shadow: 0 0 15px rgba(255,255,255,0.3); }
.hub-status { font-size: 24px; font-weight: 900; color: #3b82f6; text-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }

.controls-glow { background: #111319; padding: 25px; border-top: 1px solid #1e232e; display: flex; flex-direction: column; gap: 15px; }
.cr-top { display: flex; gap: 15px; height: 45px; }
.inp-glow { width: 140px; background: #08090c; border: 1px solid #2a2e39; border-radius: 8px; display: flex; align-items: center; padding: 0 12px; transition: 0.2s; }
.inp-glow:focus-within { border-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.2); }
.inp-glow input { width: 100%; background: transparent; border: none; color: white; font-weight: bold; font-size: 18px; outline: none; }
.inp-glow span { color: #6b7280; font-weight: bold; }
.btns-row { flex: 1; display: flex; gap: 5px; }
.btns-row button { flex: 1; background: #1a1e29; border: 1px solid #2a2e39; color: #9ca3af; border-radius: 6px; font-weight: 700; font-size: 11px; cursor: pointer; transition: 0.2s; }
.btns-row button:hover { background: #252b3b; color: white; border-color: #4b5563; }
.cr-bot { display: flex; gap: 15px; height: 70px; }
.btn-neon { flex: 1; position: relative; border: none; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #151820; overflow: hidden; transition: transform 0.1s, box-shadow 0.2s; border: 1px solid transparent; }
.btn-neon:active { transform: scale(0.98); }
.bn-light { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; box-shadow: 0 0 15px 2px currentColor; }

.neon-red { border-bottom: 3px solid #ff1f1f; }
.neon-red:hover { background: linear-gradient(to top, rgba(255, 31, 31, 0.15), transparent); border-color: #ff1f1f; box-shadow: 0 0 20px rgba(255, 31, 31, 0.2); }
.neon-red .bn-txt { color: #ff1f1f; text-shadow: 0 0 10px rgba(255, 31, 31, 0.8); }

.neon-green { border-bottom: 3px solid #00ff88; }
.neon-green:hover { background: linear-gradient(to top, rgba(0, 255, 136, 0.15), transparent); border-color: #00ff88; box-shadow: 0 0 20px rgba(0, 255, 136, 0.2); }
.neon-green .bn-txt { color: #00ff88; text-shadow: 0 0 10px rgba(0, 255, 136, 0.8); }

.neon-black { border-bottom: 3px solid #6b7280; }
.neon-black:hover { background: linear-gradient(to top, rgba(107, 114, 128, 0.15), transparent); border-color: #9ca3af; box-shadow: 0 0 20px rgba(107, 114, 128, 0.2); }
.neon-black .bn-txt { color: #d1d5db; text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); }

.bn-x { font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 4px; }
.bn-txt { font-size: 18px; font-weight: 900; letter-spacing: 1px; transition: 0.2s; }

.svg-sector { cursor:pointer;transition:filter 0.2s;stroke-linecap:round;filter: drop-shadow(0 3px 12px #1e47aa33);}
.svg-sector-winner { filter: drop-shadow(0 0 50px #a7d7fffa) brightness(1.35) drop-shadow(0 0 90px #fff); z-index:9; }
.svg-sector-outline { stroke: #8cbcf7; stroke-width: 9; opacity: 0.93;filter: blur(0.2px); }
.svg-sector-divider { stroke: #e3edfa; stroke-width: 3.2; filter: blur(0.1px); opacity: .92; }
.svg-wheel-bg { filter: blur(16px) brightness(1.7);opacity:0.82; }

/* ========================================================================== */
/* ========================= БЛЕКДЖЕК (ИДЕАЛЬНЫЙ) =========================== */
/* ========================================================================== */

#blackjack-section .stairs-game-area {
    display: block !important; 
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.bj-table-modern { 
    width: 100%;
    height: 100%; 
    min-height: 550px;
    background: radial-gradient(circle at 50% 100%, #1e3a8a 0%, #0f172a 60%, #020617 100%); 
    border-radius: 20px; 
    border: 1px solid #2a2e39;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8), 0 20px 50px rgba(0,0,0,0.5); 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    padding: 40px; 
    overflow: hidden; 
}

.table-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; font-weight: 900; color: rgba(255,255,255,0.03); letter-spacing: 15px; pointer-events: none; white-space: nowrap; }

.deck-shoe { position: absolute; top: 30px; right: 40px; width: 80px; height: 110px; }
.card-back-decor { position: absolute; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #b91c1c, #b91c1c 5px, #991b1b 5px, #991b1b 10px); border-radius: 6px; border: 2px solid #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.5); }

.dealer-area, .player-area { height: 160px; width: 100%; display: flex; justify-content: center; position: relative; z-index: 10; }
.dealer-area { margin-top: 10px; }
.player-area { margin-bottom: 10px; }

.cards-container { display: flex; justify-content: center; align-items: center; }

.bj-card { 
    width: 100px; 
    height: 140px; 
    background: white; border-radius: 8px; box-shadow: -5px 5px 15px rgba(0,0,0,0.5); 
    position: relative; display: flex; flex-direction: column; justify-content: space-between; 
    padding: 8px; font-weight: 900; 
    margin-left: -50px; /* Наложение карт друг на друга */
    transition: transform 0.2s; 
    animation: dealCard 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}
.bj-card:first-child { margin-left: 0; }
.bj-card:hover { transform: translateY(-10px); z-index: 20; }

.card-top, .card-bot { font-size: 20px; line-height: 1; display: flex; flex-direction: column; align-items: center; }
.card-bot { transform: rotate(180deg); }
.card-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 45px; }

.suit-red { color: #ef4444; }
.suit-black { color: #1f2937; }

.bj-card.hidden-card { background: repeating-linear-gradient(45deg, #3b82f6, #3b82f6 5px, #2563eb 5px, #2563eb 10px); border: 4px solid white; }
.bj-card.hidden-card .card-top, .bj-card.hidden-card .card-bot, .bj-card.hidden-card .card-center { display: none; }

.hand-score { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: #3b82f6; border: 2px solid #fff; color: white; min-width: 45px; height: 45px; padding: 0 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.5); z-index: 20; transition: all 0.3s; }
.hand-score.bust { background: #ef4444; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5); animation: shake 0.4s; }

.bj-message-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15, 23, 42, 0.95); border: 2px solid #3b82f6; padding: 25px 50px; border-radius: 15px; text-align: center; z-index: 50; box-shadow: 0 0 50px rgba(59, 130, 246, 0.4); animation: popInCenter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.bj-message-overlay .msg-title { font-size: 28px; font-weight: 900; margin-bottom: 5px; text-transform: uppercase; }
.bj-message-overlay .msg-val { font-size: 20px; font-weight: bold; color: white; }

@keyframes dealCard { 
    from { opacity: 0; transform: translate(300px, -300px) rotate(90deg) scale(0.5); } 
    to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 
}
@keyframes shake { 0%, 100% { transform: translateY(-50%) translateX(0); } 25% { transform: translateY(-50%) translateX(-5px); } 75% { transform: translateY(-50%) translateX(5px); } }
@keyframes popInCenter { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }


/* === CRASH GAME === */
.crash-wrapper { display: flex; gap: 20px; width: 100%; max-width: 1200px; height: 650px; }
.crash-sidebar { width: 280px; background: #161922; border-radius: 12px; border: 1px solid #2a2e39; display: flex; flex-direction: column; overflow: hidden; }
.crash-sidebar-header { padding: 15px; background: #12141c; border-bottom: 1px solid #2a2e39; }
.cs-row-top { display: flex; justify-content: space-between; align-items: center; }
.cs-label { color: #8b92a1; font-weight: bold; font-size: 13px; }
.cs-bank-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.cs-label-small { font-size: 10px; color: #555; font-weight: 700; margin-bottom: 2px; }
.cs-bank-val { color: #10b981; font-weight: bold; font-size: 14px; }
.crash-bets-list { flex: 1; overflow-y: auto; padding: 5px; }
.crash-bet-row { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 13px; color: #9ca3af; border-bottom: 1px solid #1e222d; align-items: center; }
.crash-bet-row.c-win .c-cashout { color: #10b981; background: rgba(16, 185, 129, 0.1); padding: 2px 5px; border-radius: 4px; }
.crash-main-area { flex: 1; display: flex; flex-direction: column; gap: 10px; }

.crash-history-bar { display: flex; gap: 5px; height: 30px; overflow: hidden; margin-bottom: 5px; }
.crash-history-bar span { padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; color: white; min-width: 50px; text-align: center; }
.c-blue { background: #3b82f6; }
.c-green { background: #10b981; }
.c-yellow { background: #fbbf24; color: black; }
.c-red { background: #ef4444; }
.c-purple { background: #8b5cf6; box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); animation: pulsePurple 2s infinite; }
@keyframes pulsePurple { 0% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); } 50% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.9); } 100% { box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); } }

.crash-display {
    flex: 1;
    background: #0b0d12;
    border-radius: 15px;
    border: 1px solid #2a2e39;
    position: relative;
    overflow: hidden;
}
canvas#crashCanvas { width: 100%; height: 100%; display: block; }
.crash-info { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 20; }
#crash-multiplier { font-size: 80px; font-weight: 900; color: white; text-shadow: 0 0 30px rgba(255, 255, 255, 0.404); font-variant-numeric: tabular-nums; letter-spacing: -2px; transition: color 0.1s; }
#crash-status { font-size: 16px; color: #aaa; letter-spacing: 4px; margin-top: 5px; font-weight: bold; text-transform: uppercase; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }

.text-glow-red { text-shadow: 0 0 50px rgba(239, 68, 68, 0.8) !important; }

/* === АНИМАЦИЯ РАКЕТЫ (SMOOTH STYLE) === */
.rocket {
    position: absolute;
    width: 120px !important;
    height: auto !important;
    z-index: 15;
    transition: none;
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8));
    pointer-events: none;
    will-change: transform, left, top;
}
.rocket-engine {
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
    animation: engineGlow 2s infinite alternate ease-in-out;
    will-change: transform, filter;
    transition: transform 0.1s linear; 
}
@keyframes engineGlow {
    0% { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5)) brightness(1); }
    100% { filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8)) brightness(1.1); }
}

.explosion { position: absolute; font-size: 80px; transform: translate(-50%, -50%); animation: explode 0.4s forwards; z-index: 16; pointer-events: none; }
@keyframes explode { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }

.crash-controls { background: #161922; padding: 20px; border-radius: 15px; border: 1px solid #2a2e39; display: flex; gap: 20px; align-items: flex-end; }
.control-row { flex: 1; display: flex; gap: 20px; }
.input-group-crash { flex: 1; }
.input-group-crash label { display: block; font-size: 12px; color: #8b92a1; margin-bottom: 8px; }
.c-input-wrap { background: #0f1219; border: 1px solid #2a2e39; border-radius: 8px; padding: 5px; display: flex; flex-direction: column; }
.c-input-wrap input { background: transparent; border: none; color: white; font-size: 18px; font-weight: bold; padding: 10px; outline: none; width: 100%; }
.c-btns { display: flex; gap: 5px; margin-top: 5px; }
.c-btns button { flex: 1; background: #232732; border: none; color: #8b92a1; border-radius: 4px; cursor: pointer; padding: 6px; font-size: 11px; font-weight: bold; }
.btn-crash-play { width: 200px; height: 85px; border: none; border-radius: 10px; background: #3b82f6; color: white; font-size: 20px; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.btn-crash-play:hover { background: #2563eb; box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
.btn-crash-play.cashout { background: linear-gradient(90deg, #f59e0b, #d97706); box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); font-size: 22px; }
.btn-crash-play:disabled { background: #2a2e39; cursor: not-allowed; box-shadow: none; color: #6b7280; }

/* === REVIEWS & FAQ & MODALS === */
.content-container { width: 100%; max-width: 900px; }
.reviews-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.reviews-header h2 { margin: 0; font-size: 18px; }
.reviews-cta { display: flex; align-items: center; gap: 15px; background: #1e222d; padding: 10px 20px; border-radius: 8px; border: 1px solid #2a2e39; }
.reviews-cta span { color: #8b92a1; font-size: 14px; font-weight: 600; }
.btn-leave-review { background: #3b82f6; color: white; border: none; padding: 8px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; }
.reviews-list { display: flex; flex-direction: column; gap: 15px; }
.review-card { background: #1e222d; padding: 20px; border-radius: 12px; border: 1px solid #2a2e39; display: flex; flex-direction: column; gap: 10px; }
.review-top { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 45px; height: 45px; background: #232732; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #555; border: 2px solid #2a2e39; }
.review-info { display: flex; flex-direction: column; }
.r-name { font-weight: bold; color: white; font-size: 15px; }
.r-date { font-size: 12px; color: #6b7280; margin-top: 2px; }
.review-body { font-size: 14px; color: #d1d5db; line-height: 1.5; background: #171a21; padding: 10px; border-radius: 8px; }
.review-footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b7280; margin-top: 5px; gap: 10px; }
.r-likes { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #9ca3af; transition: color 0.2s; }
.r-likes i { margin-right: 6px; }
.r-likes:hover { color: white; }
.r-likes.liked { color: #ef4444; }

.faq-container { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #161922; border-radius: 8px; overflow: hidden; border: 1px solid #2a2e39; cursor: pointer; }
.faq-question { padding: 15px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.faq-answer { padding: 0 15px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: #aaa; font-size: 13px; line-height: 1.5; }
.faq-item.active .faq-answer { max-height: 100px; padding-bottom: 15px; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: #161922; width: 500px; max-width: 90%; border-radius: 15px; border: 1px solid #2a2e39; overflow: hidden; animation: popIn 0.3s; }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { padding: 15px 20px; background: #1e222d; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.close-modal { font-size: 24px; cursor: pointer; color: #666; }
.modal-body { padding: 20px; }
.modal-text { font-size: 13px; color: #aaa; line-height: 1.5; margin-bottom: 15px; }
.cashback-banner { background: linear-gradient(135deg, #1e222d, #111); border-radius: 10px; padding: 20px; text-align: center; margin-bottom: 15px; border: 1px solid #2a2e39; }
.cashback-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cb-item { background: #12141c; border: 1px solid #2a2e39; padding: 10px; border-radius: 5px; text-align: center; position: relative; }
.cb-item.active { border-color: #3b82f6; }
.cb-item .tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #3b82f6; font-size: 8px; padding: 2px 5px; border-radius: 3px; }
.cb-item .perc { font-size: 10px; color: #aaa; }
.cb-item .val { font-size: 11px; font-weight: bold; }
.rank-card { background: #12141c; padding: 15px; border-radius: 10px; margin-bottom: 15px; border: 1px solid #2a2e39; }
.rank-info { display: flex; align-items: center; gap: 15px; }
.progress-bar { width: 200px; height: 6px; background: #333; border-radius: 3px; margin: 5px 0; overflow: hidden; }
.progress-bar .fill { height: 100%; background: #3b82f6; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; width: 100%; max-width: 900px; }
.slot-preview-card { background: #1e222d; border-radius: 12px; overflow: hidden; border: 1px solid #2a2e39; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.slot-preview-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); border-color: #3b82f6; }
.slot-img { height: 150px; width: 100%; display: flex; align-items: center; justify-content: center; background-color: #333; }
.slot-name { padding: 10px 15px 5px 15px; font-weight: bold; color: white; font-size: 14px; }
.slot-provider { padding: 0 15px 15px 15px; font-size: 11px; color: #6b7280; }
.slot-tag { position: absolute; top: 10px; right: 10px; background: #ef4444; color: white; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: bold; }
.game-back-btn { cursor: pointer; color: #6b7280; font-weight: bold; display: flex; align-items: center; gap: 10px; transition: 0.2s; }
.reels-wrapper { display: flex; justify-content: center; gap: 10px; margin: 20px 0; background: #12141c; padding: 20px; border-radius: 10px; }
.reel { font-size: 60px; background: #232732; width: 80px; height: 100px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.game-card { background: #1e222d; padding: 30px; border-radius: 20px; width: 100%; max-width: 600px; text-align: center; border: 1px solid #2a2e39; }
.game-controls { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.game-controls input { padding: 10px; width: 100px; border-radius: 5px; border: none; text-align: center; background: #12141c; color: white; border: 1px solid #2a2e39; }
.play-btn { background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 5px; font-weight: bold; cursor: pointer; }

/* === STAIRS (ЛЕСЕНКА) === */
.stairs-container {
    display: flex;
    width: 100%;
    max-width: 1400px; 
    height: 750px;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 40px;
    align-items: stretch; 
    justify-content: flex-start; 
}
.stairs-sidebar {
    width: 320px;
    background: #161922;
    padding: 25px;
    display: flex;
    flex-direction: column;
    border: 1px solid #2a2e39;
    border-radius: 20px;
    z-index: 5;
    flex-shrink: 0;
}
.stairs-logo {
    font-size: 24px;
    font-weight: 900;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 30px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stairs-controls { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.mines-selector { display: flex; gap: 4px; background: #0f1219; padding: 4px; border-radius: 8px; border: 1px solid #2a2e39; flex-wrap: wrap; }
.mine-btn { flex: 1; min-width: 30px; background: transparent; border: none; color: #6b7280; padding: 8px 0; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.2s; font-size: 13px; }
.mine-btn:hover { color: white; background: #1e222d; }
.mine-btn.active { background: #3b82f6; color: white; box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
.btn-stairs-play { margin-top: 10px; background: #3b82f6; color: white; border: none; padding: 18px; border-radius: 10px; font-size: 18px; font-weight: 900; cursor: pointer; transition: 0.2s; text-transform: uppercase; box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3); }
.btn-stairs-play:hover { background: #2563eb; transform: translateY(-2px); }
.btn-stairs-play.cashout { background: linear-gradient(90deg, #10b981, #059669); box-shadow: 0 5px 20px rgba(16, 185, 129, 0.3); }
.btn-stairs-play:disabled { background: #2a2e39; color: #555; cursor: not-allowed; box-shadow: none; transform: none; }

.stairs-info { margin-top: auto; background: #12141a; border-radius: 10px; padding: 15px; border: 1px solid #2a2e39; }
.si-item { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 13px; color: #8b92a1; }
.si-item:last-child { margin-bottom: 0; }
.si-item strong { font-size: 14px; color: white; }

.stairs-game-area {
    flex-grow: 1; 
    background: radial-gradient(circle at 50% 100%, #1e1b4b 0%, #020617 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #2a2e39;
}
.stairs-wrapper-inner { display: grid; grid-template-columns: 70px 1fr; gap: 20px; width: 100%; max-width: 900px; align-items: end; justify-content: center; margin: 0 auto; }
.stairs-multipliers { display: flex; flex-direction: column-reverse; gap: 8px; padding-bottom: 2px; width: 100%; }
.sm-step { font-size: 11px; font-weight: 700; color: #4b5563; text-align: right; padding: 0 10px; height: 45px !important; min-height: 45px !important; display: flex; align-items: center; justify-content: flex-end; border-radius: 4px; transition: 0.3s; white-space: nowrap; }
.sm-step.active { color: #fff; text-shadow: 0 0 10px #3b82f6; font-size: 13px; background: rgba(59, 130, 246, 0.1); }
.sm-step.passed { color: #10b981; opacity: 0.4; }

.stairs-grid { display: flex; flex-direction: column-reverse; gap: 8px; width: 100%; min-width: 400px; padding-bottom: 2px; }
.stairs-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: 100%; height: 45px !important; min-height: 45px !important; }
.stairs-tile { width: 100%; height: 100%; background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; position: relative; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); }
.stairs-tile:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); }
.stairs-row.disabled .stairs-tile { cursor: default; opacity: 0.3; pointer-events: none; border-color: transparent; background: rgba(255,255,255,0.02); }
.stairs-row.active .stairs-tile { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; box-shadow: 0 0 15px rgba(59, 130, 246, 0.15); cursor: pointer; pointer-events: auto; opacity: 1; }
.stairs-row.active .stairs-tile:hover { transform: translateY(-2px); background: rgba(59, 130, 246, 0.4); }

.stairs-tile.success { background: linear-gradient(135deg, #10b981, #059669); border-color: #34d399; box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); transform: scale(1.05); z-index: 10; font-size: 14px; }
.stairs-tile.success i { color: white; }
.stairs-tile.fail { background: #1f1f1f; border-color: #ef4444; box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); z-index: 10; font-size: 14px; }
.stairs-tile.fail i { color: #ef4444; }
.stairs-tile.revealed { background: rgba(255, 255, 255, 0.05); opacity: 0.6; font-size: 12px; }

.status-glow { text-align: center; color: #6b7280; font-size: 13px; font-weight: 700; margin-top: 15px; width: 100%; text-transform: uppercase; letter-spacing: 0.5px; }

/* === LUCKY CARDS === */
.lucky-wrapper { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; padding-top: 20px; padding-bottom: 40px; }
.lucky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; perspective: 1000px; width: 100%; }
.l-card { aspect-ratio: 4 / 5; width: 100%; cursor: pointer; position: relative; transition: transform 0.2s; }
.l-card:active { transform: scale(0.98); }
.l-card.disabled { cursor: default; pointer-events: none; }
.l-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; }
.l-card.flipped .l-card-inner { transform: rotateY(180deg); }
.l-front, .l-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.l-front { background: linear-gradient(135deg, #7c3aed, #4c1d95); font-size: 50px; color: rgba(255,255,255,0.2); border: 2px solid #8b5cf6; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); }
.l-front::after { content: '?'; font-weight: 900; font-family: 'Nunito', sans-serif; }
.l-card:not(.disabled):hover .l-front { border-color: #a78bfa; box-shadow: 0 0 25px rgba(139, 92, 246, 0.7); transform: translateY(-5px); }
.l-back { background: #1f2937; transform: rotateY(180deg); flex-direction: column; gap: 5px; }
.l-back.win, .l-back.lose { border: 2px solid #8b5cf6; box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, #1f2937 70%); }
.l-val { font-size: 32px; font-weight: 900; font-family: 'Nunito', sans-serif; letter-spacing: -0.5px; z-index: 2; white-space: nowrap; }
.l-back.win .l-val, .l-back.lose .l-val { color: #ffffff; text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); }
.l-card.unpicked { opacity: 0.4; transform: scale(0.95); filter: grayscale(0.6); }

.lucky-controls { background: #161922; padding: 25px; border-radius: 15px; border: 1px solid #2a2e39; display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 900px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }

/* === STYLES FOR LIVE CHAT === */
.chat-toggle { background: #1e222d; padding: 8px 12px; border-radius: 6px; cursor: pointer; color: #8b92a1; border: 1px solid #2a2e39; display: flex; align-items: center; margin-right: 15px; transition: 0.2s; position: relative; }
.chat-toggle:hover { color: white; border-color: #3b82f6; background: #232732; }
#online-counter { background: #ef4444 !important; color: white !important; font-weight: 800; font-size: 11px; padding: 3px 6px; border-radius: 4px; margin-left: 8px; box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); min-width: 20px; text-align: center; }

.chat-sidebar { position: fixed; top: 0; right: 0; width: 320px; height: 100vh; background: #161922; border-left: 1px solid #2a2e39; z-index: 9000; display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(0,0,0,0.5); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0); }
.chat-sidebar.hidden { transform: translateX(100%); display: flex !important; }

.chat-header { padding: 15px; background: #1e222d; border-bottom: 1px solid #2a2e39; display: flex; justify-content: space-between; align-items: center; font-weight: bold; color: white; font-size: 14px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; background: #111319; }
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: #2a2e39; }

.chat-msg { font-size: 13px; line-height: 1.4; word-wrap: break-word; display: flex; flex-direction: column; align-items: flex-start; }
.cm-name { font-weight: 800; font-size: 11px; margin-bottom: 4px; margin-left: 2px; }
.cm-text { color: #e5e7eb; background: #1e222d; padding: 8px 12px; border-radius: 0 12px 12px 12px; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border: 1px solid #2a2e39; max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; white-space: pre-wrap; }
.chat-msg.my-msg .cm-text { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }

.chat-msg.system { align-items: center; margin: 10px 0; }
.chat-msg.system span { background: rgba(255, 255, 255, 0.05); padding: 4px 10px; border-radius: 10px; color: #6b7280; font-size: 10px; font-weight: bold; text-transform: uppercase; }

.chat-input-area { padding: 15px; background: #1e222d; border-top: 1px solid #2a2e39; display: flex; gap: 10px; align-items: center; }
#chat-input { flex: 1; background: #0f1219; border: 1px solid #2a2e39; color: white; padding: 10px; border-radius: 8px; outline: none; font-weight: 600; font-size: 13px; transition: 0.2s; }
#chat-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
.chat-input-area button { background: #3b82f6; border: none; width: 40px; height: 38px; border-radius: 8px; color: white; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.chat-input-area button:hover { background: #2563eb; transform: translateY(-2px); }

/* === CRASH GATES === */
.crash-gates { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; overflow: hidden; display: flex; filter: drop-shadow(0 0 30px rgba(0,0,0,0.5)); }
.gate-left, .gate-right { position: absolute; top: 0; width: 50%; height: 100%; background: repeating-linear-gradient(45deg, #111319, #111319 10px, #0b0d12 10px, #0b0d12 20px); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); border-bottom: 2px solid #3b82f6; will-change: transform; }
.gate-left { left: 0; transform: translateX(-102%); border-right: 2px solid #3b82f6; box-shadow: 5px 0 40px rgba(59, 130, 246, 0.3); }
.gate-right { right: 0; transform: translateX(102%); border-left: 2px solid #3b82f6; box-shadow: -5px 0 40px rgba(59, 130, 246, 0.3); display: flex; align-items: center; justify-content: flex-start; }
.crash-gates.closed .gate-left { transform: translateX(0); }
.crash-gates.closed .gate-right { transform: translateX(0); }

.gate-left::after { content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 8px; height: 60px; background: #1f2937; border: 1px solid #3b82f6; border-radius: 4px; box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
.gate-right::after { content: ''; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 8px; height: 60px; background: #1f2937; border: 1px solid #3b82f6; border-radius: 4px; box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }

.gate-loading { margin-left: 50px; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 36px; color: white; text-transform: uppercase; letter-spacing: 6px; opacity: 0; transform: scale(0.5); transition: all 0.3s; text-shadow: 0 0 20px #3b82f6; }
.crash-gates.closed .gate-loading { opacity: 1; transform: scale(1); transition-delay: 0.4s; }

/* === ONLINE WIDGET === */
.online-widget { background: #1e222d; padding: 8px 12px; border-radius: 6px; border: 1px solid #2a2e39; display: flex; align-items: center; gap: 8px; margin-right: 10px; color: #8b92a1; font-weight: 700; font-size: 13px; user-select: none; }
.online-indicator { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; animation: pulseGreen 2s infinite; }
@keyframes pulseGreen { 0% { box-shadow: 0 0 5px #10b981; opacity: 1; } 50% { box-shadow: 0 0 15px #10b981, 0 0 5px #fff; opacity: 0.8; } 100% { box-shadow: 0 0 5px #10b981; opacity: 1; } }

#unread-badge { position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 10px; min-width: 18px; text-align: center; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); border: 2px solid #0f1219; }

.sound-toggle, .sound-toggle-header { background: #1e222d; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #8b92a1; border: 1px solid #2a2e39; transition: 0.2s; }
.sound-toggle { width: 35px; height: 35px; border-radius: 50%; margin-right: 10px; }
.sound-toggle-header { width: 35px; height: 35px; border-radius: 6px; margin-right: 15px; }
.sound-toggle:hover, .sound-toggle-header:hover { color: white; background: #232732; border-color: #3b82f6; }

/* ========================================= */
/* === ЯДЕРНЫЙ ФИКС СЖАТИЯ БЛЕКДЖЕКА ======= */
/* ========================================= */
#blackjack-section .stairs-container {
    width: 100% !important;
}

#blackjack-section .stairs-game-area {
    flex: 1 1 100% !important;
    min-width: 700px !important; /* 🌟 ЗАПРЕЩАЕМ СЖИМАТЬСЯ МЕНЬШЕ 700px */
    display: flex !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#blackjack-section .bj-table-modern {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important; /* 🌟 СТОЛ ВСЕГДА ЗАНИМАЕТ ВСЮ ПЛОЩАДЬ */
}

/* ========================================= */
/* === ИНДИВИДУАЛЬНЫЕ КНОПКИ БЛЕКДЖЕКА ===== */
/* ========================================= */

/* Кнопка "ЕЩЕ" (Синяя) */
#bj-actions button[onclick="hit()"] {
    background: #3b82f6 !important;
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3) !important;
}
#bj-actions button[onclick="hit()"]:hover {
    background: #2563eb !important;
    box-shadow: 0 5px 25px rgba(59, 130, 246, 0.6) !important;
}

/* Кнопка "ХВАТИТ" (Красная) */
#bj-actions button[onclick="stand()"] {
    background: #ef4444 !important;
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.3) !important;
}
#bj-actions button[onclick="stand()"]:hover {
    background: #dc2626 !important;
    box-shadow: 0 5px 25px rgba(239, 68, 68, 0.6) !important;
}

/* Кнопка "УДВОИТЬ" (Желтая) */
#bj-actions button[onclick="doubleDown()"] {
    background: #fbbf24 !important;
    color: black !important;
    box-shadow: 0 5px 20px rgba(251, 191, 36, 0.3) !important;
}
#bj-actions button[onclick="doubleDown()"]:hover {
    background: #f59e0b !important;
    box-shadow: 0 5px 25px rgba(251, 191, 36, 0.6) !important;
}

/* ========================================= */
/* === ЮРИДИЧЕСКАЯ ПЛАШКА (WARNING) ======== */
/* ========================================= */
.legal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 12, 16, 0.95);
    backdrop-filter: blur(15px); /* Сильное размытие фона */
    z-index: 999999; /* Выше чата и всех уведомлений */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.legal-content {
    background: #161922;
    border: 2px solid #ef4444; /* Красная обводка опасности */
    border-radius: 15px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.2);
    animation: dropIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes dropIn {
    from { transform: translateY(-50px) scale(0.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.legal-icon {
    font-size: 50px;
    color: #ef4444;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.5));
}

.legal-title {
    color: white;
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 20px 0;
    letter-spacing: 2px;
}

.legal-text {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 30px;
    background: #0f1219;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #2a2e39;
}

.legal-text p {
    margin: 0 0 10px 0;
}
.legal-text p:last-child {
    margin-bottom: 0;
}
.legal-text b {
    color: #e5e7eb;
}

/* Кнопка принятия */
.legal-btn {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 8px;
    border: none;
    background: #2a2e39;
    color: #6b7280;
    cursor: not-allowed;
    transition: all 0.3s;
}

/* Когда кнопка становится активной */
.legal-btn:not(:disabled) {
    background: linear-gradient(90deg, #10b981, #059669);
    color: white;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.legal-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(16, 185, 129, 0.6);
}

/* ========================================= */
/* === НОВАЯ ГЛАВНАЯ СТРАНИЦА (HOME) ======= */
/* ========================================= */
.home-layout {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

/* 1. БАННЕР HERO */
.home-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.15) 0%, rgba(15, 18, 25, 0) 60%), #12141c;
    border: 1px solid #2a2e39;
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 600px;
    z-index: 2;
}

.hero-content h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 20px 0;
    letter-spacing: -1px;
}

.hero-content p {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-image {
    position: relative;
    width: 300px;
    height: 200px;
    z-index: 1;
}

.floating-coin {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: float 4s ease-in-out infinite;
}

.coin-1 { width: 80px; height: 80px; background: linear-gradient(135deg, #fbbf24, #d97706); font-size: 40px; top: 10px; right: 20px; animation-delay: 0s; box-shadow: 0 0 30px rgba(251, 191, 36, 0.4); }
.coin-2 { width: 60px; height: 60px; background: linear-gradient(135deg, #a78bfa, #7c3aed); font-size: 30px; bottom: 20px; left: 20px; animation-delay: 1s; box-shadow: 0 0 30px rgba(124, 58, 237, 0.4); }
.coin-3 { width: 50px; height: 50px; background: linear-gradient(135deg, #34d399, #059669); font-size: 25px; top: 80px; left: 100px; animation-delay: 2s; box-shadow: 0 0 30px rgba(16, 185, 129, 0.4); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* 2. СЕТКА ИГР (ЛОББИ) */
.home-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.home-section-header h2 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.home-section-header h2 i { color: #3b82f6; }

.home-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.h-game-card {
    background: #161922;
    border: 1px solid #2a2e39;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.h-game-card:hover {
    transform: translateY(-5px);
    border-color: #3b82f6;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

.h-game-img {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    filter: brightness(0.9);
    transition: filter 0.2s;
}

.h-game-card:hover .h-game-img { filter: brightness(1.1); }

.h-game-info {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.h-game-name { font-weight: bold; font-size: 14px; }
.h-game-tag { background: rgba(59, 130, 246, 0.1); color: #3b82f6; font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 4px; }

/* 3. ТАБЛИЦА LIVE СТАВОК */
.live-pulse { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: bold; color: #10b981; }
.live-pulse span { width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; animation: pulseGreen 2s infinite; }

.live-table-container {
    background: #12141c;
    border: 1px solid #2a2e39;
    border-radius: 12px;
    overflow: hidden;
}

.live-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.live-table th {
    background: #161922;
    padding: 15px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid #2a2e39;
}

.live-table td {
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #1a1e29;
    color: #d1d5db;
}

.live-table tr { transition: background 0.2s; }
.live-table tr:hover { background: #161922; }

/* Стилизация значений в таблице */
.t-game { display: flex; align-items: center; gap: 8px; color: white; }
.t-user { color: #9ca3af; }
.t-bet { color: white; }
.t-mult { color: #6b7280; }
.t-win { color: #10b981; text-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
.t-lose { color: #6b7280; }

.row-anim { animation: highlightRow 1s ease-out; }
@keyframes highlightRow { 0% { background: rgba(59, 130, 246, 0.2); } 100% { background: transparent; } }

/* === БОНУСНЫЕ ЗАДАНИЯ === */
.bonus-task-card {
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    transition: 0.2s;
}
.bonus-task-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.1);
}
.btc-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}
.btc-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.daily-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.tg-icon { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }

.btc-info h4 {
    margin: 0 0 5px 0;
    font-size: 15px;
    color: white;
}
.btc-info p {
    margin: 0;
    font-size: 12px;
    color: #8b92a1;
    line-height: 1.4;
}
.btn-btc {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
    white-space: nowrap;
}
.claim-daily { background: #10b981; color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
.claim-daily:hover:not(:disabled) { background: #059669; transform: translateY(-2px); }
.claim-tg { background: #0ea5e9; color: white; box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3); }
.claim-tg:hover:not(:disabled) { background: #0284c7; transform: translateY(-2px); }

.btn-btc:disabled {
    background: #2a2e39;
    color: #6b7280;
    box-shadow: none;
    cursor: not-allowed;
}
.btn-btc.claimed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid #10b981;
}

/* === НАСТРОЙКИ ПРОФИЛЯ === */
.settings-container { max-width: 600px; margin: 40px auto; background: #161922; border: 1px solid #2a2e39; border-radius: 20px; padding: 40px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
.settings-header { display: flex; align-items: center; gap: 25px; border-bottom: 1px solid #2a2e39; padding-bottom: 25px; margin-bottom: 25px; }
.s-avatar { width: 90px; height: 90px; background: #1e222d; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 55px; color: #4b5563; border: 2px solid #3b82f6; box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
.s-info h2 { margin: 0 0 8px 0; font-size: 26px; color: white; letter-spacing: 1px; }
.s-info span { color: #6b7280; font-size: 14px; font-weight: 800; background: #0f1219; padding: 5px 10px; border-radius: 6px; border: 1px solid #2a2e39; }
.settings-stats { display: flex; gap: 15px; margin-bottom: 30px; }
.stat-box { flex: 1; padding: 20px; border-radius: 12px; font-weight: 800; font-size: 14px; text-align: center; border: 1px solid #2a2e39; background: #12141c; display: flex; flex-direction: column; gap: 8px; }
.stat-box span { font-size: 28px; }
.stat-box.win { color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
.stat-box.lose { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
.settings-actions { display: flex; flex-direction: column; gap: 20px; }
.s-card { background: #12141c; border: 1px solid #2a2e39; padding: 25px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; }
.s-card h3 { margin: 0; font-size: 18px; color: white; }
.s-card p { margin: 0; font-size: 13px; color: #8b92a1; }
.s-card input { background: #0f1219; border: 1px solid #2a2e39; padding: 15px; border-radius: 8px; color: white; outline: none; font-size: 15px; font-weight: bold; }
.s-card input:focus { border-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.2); }
.s-card button { background: #3b82f6; color: white; border: none; padding: 15px; border-radius: 8px; font-weight: 900; cursor: pointer; transition: 0.2s; font-size: 14px; }
.s-card button:hover { background: #2563eb; transform: translateY(-2px); }

/* === ТАБЫ ЛИДЕРБОРДА === */
.leaderboard-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: #12141c;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #2a2e39;
}
.lb-tab {
    flex: 1;
    min-width: 140px;
    background: #1a1e29;
    color: #8b92a1;
    border: 1px solid transparent;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
}
.lb-tab:hover {
    background: #232732;
    color: white;
}
.lb-tab.active {
    background: #3b82f6;
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* ========================================= */
/* === ПОДВАЛ (FOOTER) ===================== */
/* ========================================= */

.casino-footer {
    background: #0b0d12;
    border-top: 1px solid #1e222d;
    padding: 50px 30px 20px 30px;
    
    /* МАГИЯ В ЭТИХ ТРЕХ СТРОКАХ: */
    align-self: stretch; /* Растягиваем на всю ширину игнорируя центрирование игр */
    margin: auto -30px -30px -30px; /* Компенсируем отступы (padding) по краям */
    
    color: #8b92a1;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

/* === СТИЛИ ДЛЯ ЮРИДИЧЕСКИХ ТЕКСТОВ === */
.legal-doc-text {
    background: #161922;
    border: 1px solid #2a2e39;
    border-radius: 12px;
    padding: 30px;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.legal-doc-text h3 {
    color: white;
    margin: 25px 0 10px 0;
    font-size: 18px;
}
.legal-doc-text p {
    margin-bottom: 15px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
}

.age-limit {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    font-size: 12px;
    color: #9ca3af;
    margin: 15px 0 0 0;
}

.age-icon {
    background: #1e222d;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 3px 6px;
    border-radius: 4px;
    font-weight: 900;
}

.footer-links {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.fl-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fl-col h4 {
    color: white;
    margin: 0 0 10px 0;
    font-size: 14px;
    letter-spacing: 1px;
}

.fl-col a {
    color: #8b92a1;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
    font-weight: 600;
}

.fl-col a:hover {
    color: #3b82f6;
    transform: translateX(5px);
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid #1e222d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 12px;
}

.crypto-icons {
    display: flex;
    gap: 15px;
    font-size: 26px;
    color: #4b5563;
}

.crypto-icons i {
    transition: 0.2s;
    cursor: pointer;
}

.crypto-icons i:hover {
    color: #d1d5db;
}

/* ========================================= */
/* === СОВРЕМЕННЫЙ СЛОТ 5x3 ================ */
/* ========================================= */

.slot-machine-modern {
    width: 100%;
    max-width: 1200px; /* Было 800px, теперь на всю ширину контента! */
    background: #11131a;
    border-radius: 20px;
    border: 1px solid #2a2e39;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 2px rgba(255,255,255,0.02);
    overflow: hidden;
    margin: 0 auto;
}

.slot-header-modern {
    background: linear-gradient(180deg, #1e222d 0%, #11131a 100%);
    padding: 15px 30px;
    border-bottom: 1px solid #2a2e39;
    text-align: center;
}
.slot-header-modern h3 {
    margin: 0;
    font-size: 24px; /* Увеличили заголовок */
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.slot-display-modern {
    padding: 30px 40px; /* Увеличили отступы по бокам */
    background: radial-gradient(circle at 50% 50%, #1a1e29 0%, #0b0d12 100%);
    position: relative;
    min-height: 450px; /* Чтобы поле не сплющивалось */
}

.reels-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px; /* Увеличили расстояние между барабанами */
    background: rgba(0,0,0,0.4);
    padding: 15px;
    border-radius: 12px;
    border: 2px solid #2a2e39;
    box-shadow: inset 0 10px 30px rgba(0,0,0,0.8);
}

.slot-reel {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Расстояние между символами по вертикали */
    position: relative;
    overflow: hidden;
    height: 420px; /* Увеличили высоту барабана (3 иконки по 130px + отступы) */
}

/* АНИМАЦИЯ ВРАЩЕНИЯ (БЛЮР) */
.slot-reel.spinning::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, 
        rgba(59, 130, 246, 0.2) 0%, 
        rgba(139, 92, 246, 0.4) 50%, 
        rgba(59, 130, 246, 0.2) 100%);
    filter: blur(10px);
    animation: spinBlur 0.15s linear infinite;
    z-index: 10;
}
@keyframes spinBlur {
    0% { background-position: 0 0; }
    100% { background-position: 0 420px; } /* Адаптировали под новую высоту барабана */
}

.slot-symbol-box {
    height: 130px; /* Сделали ячейки символов больше (было 100) */
    background: #161922;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 65px; /* Увеличили сами иконки (было 45) */
    border: 1px solid #2a2e39;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;
}

.slot-reel.stop-bounce .slot-symbol-box {
    animation: reelBounce 0.4s ease-out forwards;
}
@keyframes reelBounce {
    0% { transform: translateY(-40px); filter: blur(5px); }
    50% { transform: translateY(15px); filter: blur(0); }
    100% { transform: translateY(0); }
}

/* КРАСИВЫЕ ИКОНКИ */
.sym-gem { color: #8b5cf6; filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6)); }
.sym-crown { color: #fbbf24; filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6)); }
.sym-star { color: #f59e0b; filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.6)); }
.sym-coin { color: #10b981; filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6)); }
.sym-heart { color: #ef4444; filter: drop-shadow(0 0 15px rgba(239, 68, 68, 0.6)); }
.sym-seven { color: #3b82f6; filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)); }

/* АНИМАЦИЯ ПОБЕДЫ (ПУЛЬСАЦИЯ СИМВОЛА) */
.symbol-win {
    animation: winPulse 1s infinite alternate;
    z-index: 5;
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}
@keyframes winPulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
    100% { transform: scale(1.15); box-shadow: 0 0 30px rgba(251, 191, 36, 1); }
}

/* ПАНЕЛЬ УПРАВЛЕНИЯ */
.slot-controls-modern {
    background: #0b0d12;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #2a2e39;
}
.sc-left, .sc-right { flex: 1; display: flex; flex-direction: column; }
.sc-right { align-items: flex-end; }
.sc-bet-input {
    background: #161922; border: 1px solid #2a2e39; border-radius: 8px;
    display: flex; align-items: center; padding: 10px 15px; margin-top: 5px; width: 180px;
}
.sc-bet-input input {
    background: transparent; border: none; color: white; font-size: 22px;
    font-weight: bold; width: 100%; outline: none;
}
.sc-win-amount {
    background: #161922; border: 1px solid #2a2e39; border-radius: 8px;
    padding: 10px 20px; font-size: 24px; font-weight: 900; color: #10b981;
    margin-top: 5px; min-width: 180px; text-align: right;
}
.btn-spin-modern {
    width: 90px; height: 90px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white; font-size: 35px; cursor: pointer;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4), inset 0 -5px 15px rgba(0,0,0,0.3);
    transition: 0.2s; display: flex; align-items: center; justify-content: center;
}
.btn-spin-modern:hover:not(:disabled) {
    transform: scale(1.05) rotate(15deg);
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.6);
}
.btn-spin-modern:active:not(:disabled) { transform: scale(0.95); }
.btn-spin-modern:disabled { background: #2a2e39; color: #6b7280; box-shadow: none; cursor: not-allowed; }

.spin-anim { animation: rotateIcon 1s linear infinite; }
@keyframes rotateIcon { 100% { transform: rotate(360deg); } }