@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Caesar+Dressing&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-image: url('images/casino_bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Russo One', sans-serif;
    padding: 10px;
}

.casino-container {
    background: linear-gradient(145deg, rgba(58, 32, 12, 0.95), rgba(26, 14, 5, 0.97));
    border: 2px solid #8b5a2b;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 900px;
    display: flex;
    gap: 20px;
}

.left-panel { width: 130px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; flex-shrink: 0; }
.left-panel button { width: 100%; border-radius: 10px; font-family: inherit; font-weight: 700; cursor: pointer; text-transform: uppercase; border: 1px solid #8b5a2b; }
.spin-btn { height: 60px; background: #c0392b; color: #f5e6b8; font-size: 18px; }
.bonus-btn, .paytable-btn { height: 45px; background: #3a200c; color: #e8b84b; font-size: 11px; }

.bet-controls { display: flex; flex-direction: column; gap: 5px; background: #1a0e05; border: 1px solid #8b5a2b; padding: 6px; border-radius: 10px; }
.bet-buttons-row { display: flex; gap: 5px; }
.bet-btn { flex: 1; height: 30px; background: #3a200c; color: #f5e6b8; border: 1px solid #8b5a2b; font-size: 16px; border-radius: 5px; }

.center-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
h1 { text-align: center; font-family: 'Caesar Dressing', serif; font-size: 32px; margin-bottom: 15px; color: #e8b84b; }

.top-panel { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.balance-box, .bet-box, .win-box { background: #3a200c; padding: 8px; flex: 1; text-align: center; border: 1px solid #8b5a2b; border-radius: 10px; }
.label { font-size: 10px; color: #e8b84b; text-transform: uppercase; margin-bottom: 4px; }
.value { font-size: 18px; color: #f5e6b8; }
.win-value { color: #6fcf97 !important; }

.reels-wrapper { background: #000; border: 2px solid #8b5a2b; padding: 10px; border-radius: 15px; width: 100%; max-width: 550px; margin: 0 auto; }
.reels-grid { display: grid; gap: 4px; width: 100%; }

.slot-cell { background: #1a0e05; border: 1px solid #8b5a2b; border-radius: 5px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; }
.slot-cell img { width: 100%; height: 100%; object-fit: cover; }
.slot-row-highlight { border: 2px solid #e8b84b !important; box-shadow: 0 0 15px #e8b84b !important; transform: scale(1.05); z-index: 10; }

/* Скрываем модалку по умолчанию */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal-content { background: #1a0e05; padding: 20px; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; border: 2px solid #8b5a2b; border-radius: 10px; }
.modal-title { color: #e8b84b; text-align: center; margin-bottom: 15px; }
.modal-row { display: flex; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.modal-row img { width: 40px; height: 40px; object-fit: cover; margin-right: 10px; }
.sym-name { color: #fff; font-size: 14px; }
.sym-payouts { color: #aaa; font-size: 12px; }

@media (max-width: 800px) {
    .casino-container { flex-direction: column-reverse; padding: 15px; gap: 15px; }
    .left-panel { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .spin-btn { flex: 1; height: 50px; }
    .bonus-btn, .paytable-btn { flex: 1; height: 50px; }
    .bet-controls { width: 100%; margin-top: 5px; }
    .center-panel { width: 100%; }
    h1 { font-size: 24px; }
    .reels-wrapper { padding: 5px; }
    .reels-grid { gap: 3px; }
}