/* MonacoBet SK – Site 1 | Light theme: body #f5f5f5, header #8B0000, gold #C9A000 */
/* Prefix: monaco- / mstep / mcat / msl / mlv / mgs / mbc / mtip / mfaq */

/* ================================================================
   RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Roboto', sans-serif;
    background: #f5f5f5;
    color: #1a1a1a;
    line-height: 1.65;
    padding-bottom: 60px;
}

a { color: #8B0000; text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 1.6rem; margin-bottom: 1rem; color: #8B0000; }
h3 { font-size: 1.2rem; margin-bottom: 0.75rem; color: #5a0000; }

p { margin-bottom: 0.9rem; }

.page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* ================================================================
   BUTTONS
   ================================================================ */
.mc-btn-primary {
    display: inline-block;
    background: #C9A000;
    color: #111;
    padding: 13px 32px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
    margin-top: 16px;
}
.mc-btn-primary:hover { background: #D4AF37; transform: translateY(-1px); text-decoration: none; }

.mc-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #8B0000;
    border: 2px solid #8B0000;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    margin-top: 12px;
}
.mc-btn-secondary:hover { background: #8B0000; color: #fff; text-decoration: none; }

/* ================================================================
   PROMO BAR
   ================================================================ */
.monaco-promo {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #CC1111;
    color: #fff;
    z-index: 9999;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
}
.monaco-promo a {
    background: #fff;
    color: #CC1111;
    padding: 7px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}
.mp-close {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}

/* ================================================================
   HEADER
   ================================================================ */
.monaco-header {
    position: sticky;
    top: 0;
    background: #8B0000;
    border-bottom: 3px solid #C9A000;
    z-index: 999;
}
.monaco-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    gap: 16px;
}
.monaco-logo img { height: 44px; width: auto; }
.monaco-nav ul { display: flex; gap: 24px; list-style: none; }
.monaco-nav a { color: #f0d080; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.monaco-nav a:hover { color: #fff; }
.monaco-reg a {
    background: #C9A000;
    color: #111;
    padding: 9px 22px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}
.monaco-reg a:hover { background: #D4AF37; }
.monaco-hm {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.monaco-hm span { display: block; width: 22px; height: 2px; background: #C9A000; }
.monaco-nav.open { display: block; }

/* ================================================================
   TOC
   ================================================================ */
.monaco-toc {
    background: #fff;
    border-bottom: 2px solid #e8d08a;
    padding: 10px 0;
}
.monaco-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    list-style: none;
}
.monaco-toc-list a {
    color: #8B0000;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.monaco-toc-list a:hover { color: #C9A000; text-decoration: underline; }

/* ================================================================
   HERO
   ================================================================ */
.monaco-hero {
    background: linear-gradient(135deg, #fff 0%, #fef9ec 100%);
    padding: 64px 0;
    border-bottom: 3px solid #e8d08a;
}
.monaco-hero__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.monaco-hero__copy h1 {
    font-size: 2.2rem;
    color: #8B0000;
    margin-bottom: 16px;
    font-weight: 900;
}
.monaco-hero__copy p { color: #333; font-size: 1.05rem; }

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.monaco-how {
    padding: 64px 0;
    background: #fff;
}
.monaco-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
}
.mstep {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fef9ec;
    border: 1px solid #e8d08a;
    border-radius: 8px;
    padding: 20px;
}
.mstep-n {
    background: #8B0000;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mstep-body strong { display: block; margin-bottom: 4px; color: #8B0000; font-size: 15px; }
.mstep-body p { font-size: 13px; color: #555; margin: 0; }

/* ================================================================
   GAMES
   ================================================================ */
.monaco-games {
    padding: 64px 0;
    background: #f5f5f5;
}
.monaco-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 28px 0;
}
.mcat {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0d0a0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.mcat:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.mcat img { width: 100%; object-fit: cover; }
.mcat-info { padding: 16px; }
.mcat-info h3 { font-size: 1rem; color: #8B0000; margin-bottom: 6px; }
.mcat-info p { font-size: 13px; color: #555; margin: 0; }

.monaco-subgame { margin-top: 48px; }

/* Slot grid */
.monaco-slots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.msl {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e0d0a0;
    text-align: center;
    transition: transform 0.2s;
}
.msl:hover { transform: scale(1.04); }
.msl img { width: 100%; }
.msl span { display: block; font-size: 11px; color: #555; padding: 4px 6px; font-weight: 500; }

/* Live / Table grid */
.monaco-live {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.mlv {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0d0a0;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mlv:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.mlv img { width: 100%; object-fit: cover; }
.mlv span { display: block; font-size: 12px; color: #333; padding: 8px; font-weight: 600; }

/* ================================================================
   REGISTRATION
   ================================================================ */
.monaco-reg-sec {
    padding: 64px 0;
    background: #fff;
}
.monaco-reg-sec__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.monaco-reg-sec__copy h2 { color: #8B0000; }
.monaco-reg-sec__img img { border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

/* ================================================================
   PAYMENTS
   ================================================================ */
.monaco-pay-sec {
    padding: 64px 0;
    background: #f5f5f5;
}
.monaco-pay-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 32px;
    align-items: center;
}
.monaco-pay-icons img {
    height: 36px;
    max-width: 80px;
    background: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    object-fit: contain;
}
.monaco-pay-group { margin-top: 40px; }
.monaco-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
    margin-top: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.monaco-table thead { background: #8B0000; color: #fff; }
.monaco-table th, .monaco-table td { padding: 12px 16px; text-align: left; }
.monaco-table tbody tr:nth-child(even) { background: #fef9ec; }
.monaco-table tbody tr:hover { background: #f5ead0; }

/* ================================================================
   HOW TO PLAY GUIDE
   ================================================================ */
.monaco-guide {
    padding: 64px 0;
    background: #fff;
    text-align: center;
}
.monaco-guide-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 28px 0;
    text-align: left;
}
.mgs {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fef9ec;
    border-left: 4px solid #C9A000;
    border-radius: 0 8px 8px 0;
    padding: 18px 20px;
}
.mgs-n {
    font-size: 22px;
    font-weight: 900;
    color: #8B0000;
    min-width: 48px;
    line-height: 1;
}
.mgs-body { font-size: 14px; color: #333; }
.mgs-body strong { display: block; margin-bottom: 4px; color: #5a0000; font-size: 15px; }

/* ================================================================
   BONUSES
   ================================================================ */
.monaco-bonusy {
    padding: 64px 0;
    background: #f5f5f5;
}
.monaco-bonus-group { margin-top: 40px; }
.monaco-bonus-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.mbc {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0d0a0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s;
}
.mbc:hover { transform: translateY(-3px); }
.mbc img { width: 100%; object-fit: cover; }
.mbc-body { padding: 14px 16px; }
.mbc-body strong { display: block; color: #8B0000; font-size: 15px; margin-bottom: 4px; }
.mbc-body p { font-size: 13px; color: #555; margin: 0; }

/* Flat bonus row */
.monaco-flat {
    display: flex;
    gap: 28px;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #e0d0a0;
    margin-top: 20px;
}
.monaco-flat img { border-radius: 6px; flex-shrink: 0; }
.monaco-flat-info strong { display: block; font-size: 17px; color: #8B0000; margin-bottom: 8px; }
.monaco-flat-info p { font-size: 14px; color: #555; margin-bottom: 0; }

/* ================================================================
   WIN TIPS
   ================================================================ */
.monaco-win {
    padding: 64px 0;
    background: #fff;
}
.monaco-tips { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
.mtip {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fef9ec;
    border: 1px solid #e8d08a;
    border-radius: 8px;
    padding: 18px 20px;
}
.mtip-icon { flex-shrink: 0; margin-top: 2px; }
.mtip-text { font-size: 14px; color: #333; }
.mtip-text strong { display: block; margin-bottom: 4px; color: #5a0000; }

/* ================================================================
   FAQ
   ================================================================ */
.monaco-faq {
    padding: 64px 0;
    background: #f5f5f5;
}
.monaco-faq-list { margin-top: 28px; }
.mfaq {
    background: #fff;
    border: 1px solid #e0d0a0;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.mfaq summary {
    padding: 16px 20px;
    font-weight: 700;
    color: #8B0000;
    cursor: pointer;
    list-style: none;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.mfaq summary::after { content: '+'; font-size: 20px; color: #C9A000; }
.mfaq[open] summary::after { content: '−'; }
.mfaq-body { padding: 0 20px 16px; font-size: 14px; color: #444; line-height: 1.6; }

/* ================================================================
   AUTHOR
   ================================================================ */
.monaco-author {
    padding: 48px 0;
    background: #fff;
    border-top: 2px solid #e8d08a;
}
.monaco-author-box {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: #fef9ec;
    border: 1px solid #e8d08a;
    border-radius: 8px;
    padding: 28px;
}
.monaco-author-box img { border-radius: 50%; flex-shrink: 0; border: 3px solid #C9A000; }
.monaco-author-info strong { display: block; font-size: 17px; color: #8B0000; margin-bottom: 4px; }
.monaco-author-info em { display: block; font-size: 12px; color: #888; margin-bottom: 10px; font-style: normal; }
.monaco-author-info p { font-size: 13px; color: #555; margin: 0; }

/* ================================================================
   FOOTER
   ================================================================ */
.monaco-footer {
    background: #1a1a1a;
    color: #ccc;
    padding: 40px 0 24px;
}
.monaco-footer__cols {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}
.monaco-footer__cols h4 { color: #C9A000; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.monaco-footer__cols ul { list-style: none; }
.monaco-footer__cols li { margin-bottom: 6px; }
.monaco-footer__cols a { color: #aaa; font-size: 13px; text-decoration: none; }
.monaco-footer__cols a:hover { color: #C9A000; }
.monaco-footer__legal {
    border-top: 1px solid #333;
    padding-top: 20px;
    font-size: 12px;
    color: #777;
    line-height: 1.7;
}
.monaco-footer__legal a { color: #999; text-decoration: underline; }

/* ================================================================
   RESPONSIVE – 1024px
   ================================================================ */
@media (max-width: 1024px) {
    .monaco-hero__layout { gap: 32px; }
    .monaco-hero__copy h1 { font-size: 1.9rem; }
    .monaco-steps { grid-template-columns: repeat(2, 1fr); }
    .monaco-slots { grid-template-columns: repeat(4, 1fr); }
    .monaco-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   RESPONSIVE – 768px
   ================================================================ */
@media (max-width: 768px) {
    body { padding-bottom: 56px; }

    /* Header */
    .monaco-hm { display: flex; }
    .monaco-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: #6b0000;
        padding: 16px 20px;
        z-index: 998;
    }
    .monaco-nav.open { display: block; }
    .monaco-nav ul { flex-direction: column; gap: 12px; }
    .monaco-reg { display: none; }

    /* Hero */
    .monaco-hero { padding: 40px 0; }
    .monaco-hero__layout { grid-template-columns: 1fr; gap: 24px; }
    .monaco-hero__copy h1 { font-size: 1.7rem; }
    .monaco-hero__img { order: -1; }

    /* Steps */
    .monaco-steps { grid-template-columns: 1fr; }

    /* Games */
    .monaco-cat-grid { grid-template-columns: 1fr; }
    .monaco-slots { grid-template-columns: repeat(3, 1fr); }
    .monaco-live { grid-template-columns: repeat(2, 1fr); }

    /* Reg */
    .monaco-reg-sec__layout { grid-template-columns: 1fr; }
    .monaco-reg-sec__img { display: none; }

    /* Bonuses */
    .monaco-bonus-cards { grid-template-columns: 1fr; }
    .monaco-flat { flex-direction: column; }

    /* Footer */
    .monaco-footer__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ================================================================
   RESPONSIVE – 320px
   ================================================================ */
@media (max-width: 320px) {
    .page-wrap { padding: 0 12px; }
    .monaco-hero__copy h1 { font-size: 1.4rem; }
    h2 { font-size: 1.3rem; }
    .monaco-slots { grid-template-columns: repeat(2, 1fr); }
    .monaco-live { grid-template-columns: 1fr; }
    .monaco-promo { font-size: 11px; }
}

/* ================================================================
   RESPONSIVE – 1440px+
   ================================================================ */
@media (min-width: 1440px) {
    .page-wrap { max-width: 1380px; }
    .monaco-hero__copy h1 { font-size: 2.5rem; }
}