[html]<style>
/* === КОРНЕВОЙ БЛОК ИГРОВОЙ ЗОНЫ === */
#casino-game-app.casino-lobby {
    max-width: 760px;
    margin: 25px auto;
    background: #111a15;
    border: 1px solid #24382c;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(10, 20, 15, 0.35), 0 0 0 1px rgba(255,255,255,0.03);
    font-family: inherit;
    color: #d8e2dc;
    overflow: hidden;
    box-sizing: border-box;
}

/* === ШАПКА КАЗИНО === */
#casino-game-app .casino-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #0b120e;
    border-bottom: 1px solid #1a2a20;
    box-sizing: border-box;
    gap: 12px;
}
#casino-game-app .casino-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}
#casino-game-app .casino-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
    color: #e3caa5 !important;
    text-transform: lowercase !important;
    font-weight: 700 !important;
    display: block !important;
    line-height: 1.2 !important;
}
#casino-game-app .casino-badge {
    font-size: 9px;
    background: rgba(82, 227, 150, 0.12);
    color: #6ee7a8;
    border: 1px solid rgba(82, 227, 150, 0.25);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: lowercase;
}
#casino-game-app .casino-balance-box {
    text-align: right;
    background: #15221b;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid #233a2d;
    flex-shrink: 0;
}
#casino-game-app .casino-balance-box .lbl {
    font-size: 8px;
    display: block;
    color: #8fa899;
    letter-spacing: 1px;
    text-transform: lowercase;
}
#casino-game-app .casino-balance-box .val {
    font-size: 15px;
    font-weight: bold;
    color: #f3d88b;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* === ВЕКТОРНАЯ ФИШКА === */
.casino-chip {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%231b5c3a' stroke='%23e0c38c' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='11' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='4,4'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%230f3a24' stroke='%23e0c38c' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23e0c38c'/%3E%3C/svg%3E");
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* === НАВИГАЦИЯ === */
#casino-game-app .casino-nav {
    display: flex;
    justify-content: center;
    padding: 12px 20px;
    background: #0e1612;
    border-bottom: 1px solid #1a2a20;
    gap: 8px;
    box-sizing: border-box;
    overflow-x: auto;
}
#casino-game-app .c-nav-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 7px 18px !important;
    margin: 0 !important;
    color: #8aa393 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-transform: lowercase !important;
    line-height: normal !important;
    height: auto !important;
    white-space: nowrap;
}
#casino-game-app .c-nav-btn:hover {
    color: #e5ece7 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
#casino-game-app .c-nav-btn.active {
    color: #6ee7a8 !important;
    background: #17271e !important;
    border-color: #2a4736 !important;
    font-weight: 600 !important;
}

/* === ЭКРАНЫ ИГР === */
#casino-game-app .casino-view {
    display: none;
    padding: 24px;
    box-sizing: border-box;
}
#casino-game-app .casino-view.active {
    display: block;
}
#casino-game-app .game-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#casino-game-app .game-card h3 {
    margin: 0 0 6px !important;
    color: #e3caa5 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: lowercase !important;
}
#casino-game-app .game-desc {
    color: #859e8f;
    font-size: 12px;
    margin: 0 0 20px;
    text-transform: lowercase;
}

/* === ПАНЕЛЬ СТАВОК === */
#casino-game-app .bet-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    font-size: 12px;
    text-transform: lowercase;
    color: #9cb5a5;
}
#casino-game-app input[type="number"] {
    background: #080d0a !important;
    border: 1px solid #1e3326 !important;
    color: #f3d88b !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    width: 90px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
#casino-game-app .c-action-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    background: #1b5c3a !important;
    color: #ffffff !important;
    border: 1px solid #2d7a51 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    transition: all 0.2s !important;
    text-transform: lowercase !important;
    line-height: normal !important;
    box-shadow: none !important;
    height: auto !important;
}
#casino-game-app .c-action-btn:hover {
    background: #25784d !important;
    border-color: #3ba06a !important;
    box-shadow: 0 0 10px rgba(82, 227, 150, 0.25) !important;
}
#casino-game-app .c-action-btn:disabled {
    background: #16221b !important;
    border-color: #23352a !important;
    color: #55695d !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* === 1. СЛОТЫ === */
@keyframes slotBlur {
    0% { filter: blur(0px); transform: translateY(0); }
    25% { filter: blur(1px); transform: translateY(2px); }
    50% { filter: blur(2px); transform: translateY(-2px); }
    75% { filter: blur(1px); transform: translateY(2px); }
    100% { filter: blur(0px); transform: translateY(0); }
}
.slot-spinning { animation: slotBlur 0.1s infinite linear; }
#display-reels {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #080d0a;
    border-radius: 12px;
    border: 1px solid #1e3326;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    min-height: 85px;
    width: fit-content;
}

/* === 2. РУЛЕТКА === */
#roulette-container {
    position: relative;
    width: 350px;
    max-width: 100%;
    height: 80px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid #1e3326;
    border-radius: 10px;
    background: #080d0a;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}
#roulette-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: #e0c38c;
    z-index: 10;
    box-shadow: 0 0 8px rgba(224, 195, 140, 0.7);
}
.roulette-tile {
    width: 70px;
    height: 80px;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
}
.roulette-tile img {
    width: 70px;
    height: 80px;
    display: block;
    pointer-events: none;
}
#roulette-tape {
    display: flex;
    transform: translateX(0);
    will-change: transform;
}
.roulette-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    width: 100%;
}
.bet-btn-r {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    padding: 8px 14px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    transition: opacity 0.2s !important;
    text-transform: lowercase !important;
    line-height: normal !important;
    height: auto !important;
}
.bet-btn-r:hover { opacity: 0.88; }
.btn-red { background: #852626 !important; color: #fff !important; }
.btn-black { background: #181d19 !important; color: #d8e2dc !important; border: 1px solid #29382d !important; }
.btn-green { background: #1b5c3a !important; color: #f3d88b !important; }

/* === 3. ПОКЕР (РУБАШКА И ТАБЛИЦА ВЫПЛАТ) === */
#poker-table {
    display: flex;
    justify-content: center;
    gap: 10px;
    min-height: 95px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.poker-card {
    transition: all 0.2s ease-in-out;
    user-select: none;
    box-sizing: border-box;
}
/* Рубашка карты */
.card-back {
    width: 58px;
    height: 85px;
    background: #0d1a13;
    border: 2px solid #233a2c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    background-image: repeating-linear-gradient(45deg, rgba(82,227,150,0.05) 0, rgba(82,227,150,0.05) 4px, transparent 0, transparent 8px);
}
.card-back::after {
    content: "♠";
    color: #244633;
    font-size: 20px;
}

/* Справка по комбинациям */
.poker-help-table {
    margin-top: 20px;
    width: 100%;
    max-width: 520px;
    background: #0d1511;
    border: 1px solid #1e3326;
    border-radius: 8px;
    padding: 10px 14px;
    box-sizing: border-box;
    text-align: left;
}
.poker-help-table h4 {
    margin: 0 0 8px;
    color: #e3caa5;
    font-size: 11px;
    text-transform: lowercase;
    text-align: center;
}
.poker-rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    font-size: 10px;
    color: #8da394;
}
.poker-rules-grid div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
    padding-bottom: 2px;
}
.poker-rules-grid span.mult {
    color: #6ee7a8;
    font-weight: 600;
}

/* === МОБИЛЬНАЯ АДАПТАЦИЯ === */
@media (max-width: 640px) {
    #casino-game-app.casino-lobby {
        margin: 12px auto;
        border-radius: 12px;
    }
    #casino-game-app .casino-header {
        flex-direction: column;
        align-items: stretch;
        padding: 14px 16px;
        gap: 12px;
    }
    #casino-game-app .casino-title {
        align-items: center;
        text-align: center;
    }
    #casino-game-app .casino-balance-box {
        text-align: center;
    }
    #casino-game-app .casino-balance-box .val {
        justify-content: center;
    }
    #casino-game-app .casino-nav {
        padding: 8px 10px;
        justify-content: center;
    }
    #casino-game-app .c-nav-btn {
        padding: 7px 12px !important;
    }
    #casino-game-app .casino-view {
        padding: 18px 12px;
    }
    .bet-controls {
        flex-wrap: wrap;
    }
    .roulette-btns {
        flex-direction: column;
    }
    .poker-rules-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<div id="casino-game-app" class="casino-lobby">
    <!-- Шапка фойе -->
    <div class="casino-header">
        <div class="casino-title">
            <span class="casino-badge">gaming lounge</span>
            <h2>royal casino: игровой зал</h2>
        </div>
        <div class="casino-balance-box">
            <span class="lbl">баланс фишек</span>
            <div class="val"><span id="casino-chip-count">0</span> <span class="casino-chip"></span></div>
        </div>
    </div>

    <!-- Вкладки игр -->
    <div class="casino-nav">
        <button type="button" class="c-nav-btn active" data-tab="tab-slots">слоты</button>
        <button type="button" class="c-nav-btn" data-tab="tab-roulette">рулетка</button>
        <button type="button" class="c-nav-btn" data-tab="tab-poker">покер</button>
    </div>

    <!-- 1. Слоты (min 10) -->
    <div id="tab-slots" class="casino-view active">
        <div class="game-card">
            <h3>классические слоты</h3>
            <p class="game-desc">собери 3 одинаковых символа в ряд. выигрыш: х2 от ставки.</p>
            <div id="display-reels"></div>
            <div class="bet-controls">
                <label>ставка (мин. 10):</label>
                <input type="number" id="price_field" min="10" max="5000" step="10" value="10">
                <button type="button" id="run-slots" class="c-action-btn">дёрнуть рычаг</button>
            </div>
        </div>
    </div>

    <!-- 2. Рулетка (min 50) -->
    <div id="tab-roulette" class="casino-view">
        <div class="game-card">
            <h3>европейская рулетка</h3>
            <p class="game-desc">красное (х2) | черное (х2) | зеленое zero (х14)</p>
            <div id="roulette-container">
                <div id="roulette-marker"></div>
                <div id="roulette-tape"></div>
            </div>
            <div class="bet-controls" style="margin-top: 16px;">
                <label>ставка (мин. 50):</label>
                <input type="number" id="roulette_amount" min="50" max="5000" step="25" value="50">
            </div>
            <div class="roulette-btns">
                <button type="button" class="bet-btn-r btn-red" data-bet="красное">красное (х2)</button>
                <button type="button" class="bet-btn-r btn-green" data-bet="зеленое">зеро 0 (х14)</button>
                <button type="button" class="bet-btn-r btn-black" data-bet="черное">черное (х2)</button>
            </div>
        </div>
    </div>

    <!-- 3. Покер (min 100) -->
    <div id="tab-poker" class="casino-view">
        <div class="game-card">
            <h3>видеопокер (jacks or better)</h3>
            <p class="game-desc">кликни на карты, которые хочешь оставить, и нажми «обменять».</p>
            <div id="poker-table"></div>
            <div class="bet-controls">
                <label>ставка (мин. 100):</label>
                <input type="number" id="poker_amount" min="100" max="5000" step="50" value="100">
                <button type="button" id="poker-main-btn" class="c-action-btn">раздать</button>
            </div>

            <!-- Справка по комбинациям -->
            <div class="poker-help-table">
                <h4>таблица выплат и комбинации</h4>
                <div class="poker-rules-grid">
                    <div><span>пара валетов+</span><span class="mult">х1</span></div>
                    <div><span>две пары</span><span class="mult">х2</span></div>
                    <div><span>сет (3 карты)</span><span class="mult">х3</span></div>
                    <div><span>стрит (по порядку)</span><span class="mult">х4</span></div>
                    <div><span>флеш (одна масть)</span><span class="mult">х6</span></div>
                    <div><span>фулл хаус (3+2)</span><span class="mult">х9</span></div>
                    <div><span>каре (4 карты)</span><span class="mult">х25</span></div>
                    <div><span>стрит-флеш</span><span class="mult">х50</span></div>
                    <div><span>рояль-флеш</span><span class="mult">х250</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Ссылка на JS игровой зоны -->
<script src="https://forumstatic.ru/files/0012/10/e7/29679.js?v=999"></script>
[/html]
[hideprofile]