.rules-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* =========================================================
   HEADER
   ========================================================= */

.rules-header {
    min-height: 90px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(7, 7, 9, 0.92);
}


.rules-brand {
    display: flex;
    align-items: end;
    gap: 3px;
}


.rules-brand-main {
    color: #f2f2f3;

    font-size: 29px;
    font-weight: 950;

    letter-spacing: -0.055em;
}


.rules-brand-dot {
    color: var(--red-bright);

    font-size: 20px;
    font-weight: 950;
}


.rules-back {
    min-height: 38px;

    padding:
        0
        14px;

    display: flex;
    align-items: center;
    gap: 9px;

    border:
        1px solid var(--border);

    border-radius: 4px;

    color: #9999a1;

    font-size: 8px;
    font-weight: 900;
}


.rules-back span {
    color: var(--red-bright);
}


/* =========================================================
   MAIN
   ========================================================= */

.rules-main {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding:
        36px
        clamp(22px, 5vw, 80px)
        75px;

    flex: 1;
}


.breadcrumb {
    margin-bottom: 30px;

    display: flex;
    gap: 9px;

    color: #66666e;

    font-size: 8px;
    font-weight: 800;
}


.breadcrumb span:last-child {
    color: #9999a0;
}


/* =========================================================
   TITLE
   ========================================================= */

.rules-title {
    margin-bottom: 26px;
}


.rules-kicker {
    color: var(--red-bright);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.22em;
}


.rules-title h1 {
    margin:
        4px
        0
        6px;

    color: #f1f1f3;

    font-size:
        clamp(38px, 5vw, 58px);

    font-weight: 950;

    letter-spacing: -0.05em;
}


.rules-title p {
    margin: 0;

    max-width: 700px;

    color: #777780;

    font-size: 11px;
}


/* =========================================================
   INTRO
   ========================================================= */

.rules-intro {
    margin-bottom: 24px;

    padding:
        19px
        21px;

    display: flex;
    align-items: flex-start;
    gap: 16px;

    border:
        1px solid rgba(227, 38, 46, 0.18);

    border-radius: 6px;

    background:
        linear-gradient(
            110deg,
            rgba(65, 11, 15, 0.32),
            rgba(14, 14, 17, 0.8)
        );
}


.rules-intro-mark {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(227, 38, 46, 0.36);

    border-radius: 50%;

    color: var(--red-bright);

    font-weight: 950;
}


.rules-intro strong {
    color: #d8d8dc;

    font-size: 10px;
    font-weight: 900;
}


.rules-intro p {
    margin:
        4px
        0
        0;

    max-width: 850px;

    color: #777780;

    font-size: 9px;
    line-height: 1.7;
}


/* =========================================================
   RULE CARDS
   ========================================================= */

.rules-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.rule-card {
    position: relative;

    min-height: 180px;

    padding:
        25px
        24px;

    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 20, 24, 0.9),
            rgba(9, 9, 12, 0.94)
        );

    transition:
        transform 180ms ease,
        border-color 180ms ease;
}


.rule-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(227, 38, 46, 0.34);
}


.rule-number {
    position: absolute;

    right: 18px;
    top: 10px;

    color:
        rgba(255, 255, 255, 0.035);

    font-size: 55px;
    font-weight: 950;
}


.rule-card h2 {
    margin:
        45px
        0
        10px;

    color: #e8e8eb;

    font-size: 17px;
    font-weight: 950;
}


.rule-card p {
    margin: 0;

    max-width: 520px;

    color: #76767e;

    font-size: 10px;
    line-height: 1.75;
}


/* =========================================================
   SERVER RULES
   ========================================================= */

.rules-server-section {
    margin-top: 55px;
}


.rules-section-heading {
    margin-bottom: 22px;
}


.rules-section-heading h2 {
    margin:
        4px
        0
        6px;

    color: #ececef;

    font-size:
        clamp(26px, 3vw, 38px);

    font-weight: 950;

    letter-spacing: -0.04em;
}


.rules-section-heading p {
    margin: 0;

    color: #777780;

    font-size: 10px;
}


.server-rule-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 17px;
}


.server-rule-card {
    padding:
        22px
        23px;

    border:
        1px solid var(--border);

    border-radius: 7px;

    background:
        rgba(14, 14, 17, 0.78);
}


.server-rule-top {
    margin-bottom: 18px;
}


.server-rule-type {
    display: inline-block;

    margin-bottom: 7px;

    padding:
        4px
        7px;

    border:
        1px solid rgba(227, 38, 46, 0.18);

    border-radius: 3px;

    color: var(--red-bright);

    font-size: 7px;
    font-weight: 900;
}


.server-rule-card h3 {
    margin: 0;

    color: #dfdfe2;

    font-size: 18px;
    font-weight: 950;
}


.server-rule-card ul {
    margin: 0;
    padding-left: 18px;

    color: #777780;

    font-size: 10px;
    line-height: 1.9;
}


.server-rule-card li::marker {
    color: var(--red-bright);
}


/* =========================================================
   CONTACT CTA
   ========================================================= */

.rules-footer-note {
    margin-top: 20px;

    padding:
        27px
        29px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    border:
        1px solid rgba(227, 38, 46, 0.16);

    border-radius: 7px;

    background:
        linear-gradient(
            110deg,
            rgba(55, 10, 14, 0.38),
            rgba(13, 13, 16, 0.9)
        );
}


.rules-footer-note h2 {
    margin:
        3px
        0
        5px;

    color: #ededf0;

    font-size: 22px;
    font-weight: 950;
}


.rules-footer-note p {
    margin: 0;

    color: #777780;

    font-size: 10px;
}


.rules-contact-button {
    min-width: 145px;
    min-height: 42px;

    padding:
        0
        15px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    border:
        1px solid rgba(227, 38, 46, 0.58);

    border-radius: 4px;

    background:
        rgba(227, 38, 46, 0.13);

    color: #fff;

    font-size: 8px;
    font-weight: 900;
}


.rules-contact-button span {
    color: var(--red-bright);
}


/* =========================================================
   FOOTER
   ========================================================= */

.rules-footer {
    min-height: 80px;

    padding:
        20px
        clamp(22px, 5vw, 80px);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    border-top:
        1px solid var(--border);

    color: #6e6e76;

    font-size: 9px;
}


.rules-footer strong {
    color: #a0a0a7;
}


.rules-footer a {
    justify-self: end;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .rules-grid,
    .server-rule-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 650px) {

    .rules-header {
        padding:
            15px
            16px;
    }


    .rules-brand-main {
        font-size: 23px;
    }


    .rules-brand-dot {
        font-size: 16px;
    }


    .rules-main {
        padding:
            25px
            13px
            45px;
    }


    .rules-intro {
        padding:
            16px;
    }


    .rule-card {
        min-height: 165px;

        padding:
            21px
            19px;
    }


    .rule-card h2 {
        margin-top: 36px;
    }


    .rules-footer-note {
        padding:
            23px
            20px;

        flex-direction: column;
        align-items: stretch;
    }


    .rules-contact-button {
        width: 100%;
    }


    .rules-footer {
        grid-template-columns:
            1fr;

        gap: 9px;

        text-align: center;
    }


    .rules-footer a {
        justify-self: center;
    }

}