/* BACKGAMMON ONLINE — STRATEGY ACADEMY */
.strategy-page {
    background: #fbf7ef;
    color: #65452e;
}

.strategy-hero {
    background: linear-gradient(130deg, #f1e2cb, #fff9ed);
    border-bottom: 1px solid #dfc9a9;
}

    .strategy-hero h1 {
        color: #513624;
        line-height: 1.16;
    }

        .strategy-hero h1 span {
            color: #a27646;
        }

.strategy-kicker, .strategy-section-label, .strategy-level-caption, .strategy-modal-kicker {
    color: #946735;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.strategy-hero-text, .strategy-intro p {
    color: #75614d;
    max-width: 680px;
}

.strategy-primary-btn {
    background: #65452e;
    color: #f4dfb5;
    border: 1px solid #a88755;
    font-weight: 600;
    border-radius: 8px;
}

    .strategy-primary-btn:hover, .strategy-primary-btn:focus {
        background: #79563a;
        border-color: #a88755;
        color: #fff4d9;
    }

.strategy-hero-feature {
    background: #fff9ef;
    border: 1px solid #d6ba90;
    border-radius: 20px;
    padding: 34px 24px;
    box-shadow: 0 12px 30px rgba(83, 55, 34, .08);
}

    .strategy-hero-feature > i {
        display: block;
        font-size: 3.8rem;
        color: #a88755;
        margin-bottom: 17px;
    }

.strategy-hero-feature-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.strategy-hero-feature p {
    color: #75614d;
    font-size: .92rem;
}

.strategy-intro h2 {
    color: #543a29;
}

.strategy-intro p {
    margin-inline: auto;
}

.strategy-level-head {
    border-bottom: 1px solid #dec9aa;
    padding-bottom: 18px;
}

.strategy-level-icon {
    width: 53px;
    height: 53px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #ead6b8;
    color: #805333;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.strategy-level-head h3 {
    color: #543a29;
}

.strategy-lesson-card {
    background: #fffaf2;
    border: 1px solid #e4d0b4 !important;
    border-radius: 15px;
    box-shadow: 0 5px 18px rgba(92, 59, 37, .07);
    transition: transform .18s ease, box-shadow .18s ease;
}

    .strategy-lesson-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(92, 59, 37, .12);
    }

.strategy-lesson-icon {
    display: grid;
    place-items: center;
    width: 51px;
    height: 51px;
    background: #efe0c8;
    color: #926239;
    border-radius: 12px;
    font-size: 1.35rem;
    margin-bottom: 20px;
}

.strategy-lesson-number {
    color: #a17a50;
    letter-spacing: .1em;
    font-size: .72rem;
    font-weight: 700;
}

.strategy-lesson-card h4 {
    color: #543825;
}

.strategy-lesson-copy {
    color: #76614e;
    line-height: 1.65;
    font-size: .92rem;
}

.strategy-lesson-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 0;
    background: transparent;
    border: 0;
    color: #83552d;
    font-weight: 700;
    text-align: left;
}

    .strategy-lesson-link:hover, .strategy-lesson-link:focus-visible {
        color: #55351d;
        text-decoration: underline;
    }

.strategy-tip {
    background: #efdfc6;
    border: 1px solid #d3b58e;
    padding: 27px;
    border-radius: 15px;
}

.strategy-tip-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #65452e;
    color: #f4dfb5;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.strategy-tip p {
    color: #654d3b;
    line-height: 1.7;
}

.strategy-cta {
    padding: 36px 20px;
    background: #e8d5b5;
    border-radius: 16px;
    border: 1px solid #cfb088;
}

.strategy-cta-icon {
    font-size: 2.2rem;
    color: #90643f;
}

.strategy-cta p {
    color: #705741;
}

.strategy-lesson-modal .modal-content {
    background: #fffaf2;
    color: #65452e;
    border: 1px solid #c4a073;
    border-radius: 15px;
}

.strategy-lesson-modal .modal-header {
    background: #eedcc0;
    border-bottom: 1px solid #d7b990;
    padding: 21px 24px;
}




.strategy-lesson-modal .btn-close {
    background-color: #65452e;
    border: 1px solid #a88755;
    border-radius: 8px;
    padding: 10px;
    opacity: 1;
    box-shadow: none;
    filter: none;
    --bs-btn-close-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f4dfb5' d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
}

    .strategy-lesson-modal .btn-close:hover {
        background-color: #79563a;
        opacity: 1;
    }

    .strategy-lesson-modal .btn-close:focus {
        box-shadow: none;
    }




.strategy-lesson-modal .modal-body {
    padding: 24px;
    line-height: 1.75;
}

    .strategy-lesson-modal .modal-body p {
        color: #674e3b;
    }

.strategy-modal-lead {
    font-size: 1.05rem;
    font-weight: 600;
    color: #553a28 !important;
}

.strategy-modal-tip {
    margin-top: 20px;
    border-left: 4px solid #a88755;
    padding: 14px 16px;
    background: #f2e4cf;
    color: #5c412d;
    border-radius: 5px;
}

.strategy-lesson-modal .modal-footer {
    border-top: 1px solid #e2ceb1;
}

.strategy-modal-close {
    background: #65452e;
    color: #f4dfb5;
    border: 1px solid #a88755;
}

    .strategy-modal-close:hover {
        background: #79563a;
        color: white;
    }

.strategy-page .text-muted {
    color: #76614e !important;
}

@media (max-width: 767.98px) {
    .strategy-hero h1 {
        font-size: 2.4rem;
    }

    .strategy-hero-feature {
        padding: 22px;
    }

    .strategy-level-head {
        gap: 12px !important;
    }

        .strategy-level-head h3 {
            font-size: 1.15rem;
        }

    .strategy-tip {
        padding: 20px;
    }

    .strategy-lesson-modal .modal-header, .strategy-lesson-modal .modal-body {
        padding: 18px;
    }
}