/* =========================================================
   ROMA NEXT / FOOTER
   ========================================================= */

.rn-footer {
    position: relative;

    overflow: hidden;

    background: #050708;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}


/* =========================================================
   TRICOLORE
   ========================================================= */

.rn-footer-tricolor {
    width: 100%;
    height: 2px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);
}

.rn-footer-tricolor span:nth-child(1) {
    background: #009246;
}

.rn-footer-tricolor span:nth-child(2) {
    background: #e9e9e6;
}

.rn-footer-tricolor span:nth-child(3) {
    background: #ce2b37;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.rn-footer-container {
    width:
        min(
            calc(100% - 80px),
            1480px
        );

    margin: 0 auto;
}


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

.rn-footer-main {
    padding:
        85px 0 75px;

    display: grid;

    grid-template-columns:
        minmax(300px, 1.4fr)
        .7fr
        .7fr
        minmax(280px, .9fr);

    gap: 65px;
}


/* =========================================================
   BRAND
   ========================================================= */

.rn-footer-brand {
    display: flex;

    align-items: flex-start;

    gap: 20px;
}

.rn-footer-logo {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

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

.rn-footer-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.rn-footer-brand-content {
    padding-top: 2px;
}

.rn-footer-overline {
    color: #5f676b;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.rn-footer-brand h2 {
    margin-top: 7px;

    color: #fff;

    font-family: var(--rn-heading);

    font-size: 31px;
    font-weight: 600;

    line-height: 1;

    letter-spacing: -1px;
}

.rn-footer-brand h2 strong {
    font-weight: 800;
}

.rn-footer-roleplay {
    margin-top: 8px;

    color: #666e72;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 5px;
}

.rn-footer-brand p {
    max-width: 260px;

    margin-top: 25px;

    color: #747c80;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.rn-footer-column-title {
    display: block;

    margin-bottom: 22px;

    color: #555d61;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 2px;
}

.rn-footer-column nav {
    display: flex;
    flex-direction: column;
}

.rn-footer-column nav a {
    min-height: 37px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: #858c90;

    font-size: 11px;
    font-weight: 600;

    transition:
        color .2s ease,
        transform .2s ease;
}

.rn-footer-column nav a svg {
    width: 13px;
    height: 13px;

    opacity: 0;

    transform:
        translateX(-6px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.rn-footer-column nav a:hover,
.rn-footer-column nav a.is-active {
    color: #fff;

    transform:
        translateX(4px);
}

.rn-footer-column nav a:hover svg,
.rn-footer-column nav a.is-active svg {
    opacity: 1;

    transform:
        translateX(0);
}


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

.rn-footer-status {
    padding: 17px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .025);
}

.rn-footer-status-head {
    display: flex;
    align-items: center;

    gap: 11px;
}

.rn-footer-status-light {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background:
        rgba(255, 255, 255, .035);

    border:
        1px solid
        rgba(255, 255, 255, .06);
}

.rn-footer-status-light span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #777f83;
}

.rn-footer-status.is-online
.rn-footer-status-light span {
    background: #32dc78;

    box-shadow:
        0 0 12px
        rgba(50, 220, 120, .7);
}

.rn-footer-status.is-offline
.rn-footer-status-light span {
    background: #df4c56;

    box-shadow:
        0 0 12px
        rgba(223, 76, 86, .55);
}

.rn-footer-status-head small {
    display: block;

    margin-bottom: 4px;

    color: #5c6468;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.rn-footer-status-head strong {
    display: block;

    color: #d9dddf;

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

.rn-footer-status-players {
    margin-top: 17px;

    padding-top: 14px;

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

    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}

.rn-footer-status-players span {
    color: #60686c;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}

.rn-footer-status-players strong {
    color: #fff;

    font-family: var(--rn-heading);

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


/* =========================================================
   PLAY
   ========================================================= */

.rn-footer-play {
    min-height: 59px;

    margin-top: 10px;

    padding:
        0 10px 0 16px;

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

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(
            110deg,
            rgba(0, 146, 70, .15),
            rgba(255, 255, 255, .035) 50%,
            rgba(206, 43, 55, .15)
        );

    border:
        1px solid
        rgba(255, 255, 255, .09);

    transition:
        border-color .25s ease,
        transform .25s ease;
}

.rn-footer-play:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 255, 255, .18);
}

.rn-footer-play > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.rn-footer-play > div span {
    color: #666e72;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.1px;
}

.rn-footer-play > div strong {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: .5px;
}

.rn-footer-play-icon {
    width: 37px;
    height: 37px;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .06);

    border:
        1px solid
        rgba(255, 255, 255, .08);
}

.rn-footer-play-icon svg {
    width: 15px;
    height: 15px;

    transition:
        transform .2s ease;
}

.rn-footer-play:hover
.rn-footer-play-icon svg {
    transform:
        translateX(3px);
}


/* =========================================================
   GIANT LOGO
   ========================================================= */

.rn-footer-giant {
    height: clamp(
        130px,
        15vw,
        220px
    );

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

    overflow: hidden;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);

    font-family: var(--rn-heading);

    font-size:
        clamp(
            90px,
            15vw,
            230px
        );

    font-weight: 800;

    line-height: .7;

    letter-spacing: -.085em;

    user-select: none;
}

.rn-footer-giant span {
    color:
        rgba(255, 255, 255, .055);
}

.rn-footer-giant strong {
    font-weight: 800;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, .10);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.rn-footer-bottom {
    min-height: 90px;

    display: grid;

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

    align-items: center;

    gap: 30px;
}

.rn-footer-bottom-left {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #555d61;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1px;
}

.rn-footer-dot {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #555d61;
}

.rn-footer-coordinates {
    display: flex;

    gap: 8px;

    color: #60686c;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.rn-footer-top {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 11px;

    cursor: pointer;

    color: #777f83;

    background: transparent;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.rn-footer-top > div {
    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, .11);

    transition:
        background .2s ease,
        transform .2s ease;
}

.rn-footer-top svg {
    width: 13px;
    height: 13px;
}

.rn-footer-top:hover {
    color: #fff;
}

.rn-footer-top:hover > div {
    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, .05);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .rn-footer-main {
        grid-template-columns:
            1.3fr .7fr .7fr;

        gap: 50px;
    }

    .rn-footer-server {
        grid-column:
            1 / -1;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }

    .rn-footer-server
    .rn-footer-column-title {
        grid-column:
            1 / -1;

        margin-bottom: 5px;
    }

    .rn-footer-play {
        margin-top: 0;
    }
}


@media (max-width: 750px) {

    .rn-footer-container {
        width:
            calc(100% - 36px);
    }

    .rn-footer-main {
        grid-template-columns:
            1fr 1fr;
    }

    .rn-footer-brand {
        grid-column:
            1 / -1;
    }

    .rn-footer-server {
        grid-column:
            1 / -1;
    }

    .rn-footer-bottom {
        padding:
            25px 0;

        grid-template-columns:
            1fr auto;
    }

    .rn-footer-coordinates {
        display: none;
    }
}


@media (max-width: 520px) {

    .rn-footer-main {
        padding:
            65px 0 55px;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .rn-footer-brand,
    .rn-footer-server {
        grid-column: auto;
    }

    .rn-footer-server {
        display: block;
    }

    .rn-footer-server
    .rn-footer-column-title {
        display: block;

        margin-bottom: 22px;
    }

    .rn-footer-play {
        margin-top: 10px;
    }

    .rn-footer-giant {
        justify-content: flex-start;

        font-size: 28vw;
    }

    .rn-footer-bottom {
        grid-template-columns:
            1fr auto;
    }

    .rn-footer-bottom-left {
        flex-direction: column;
        align-items: flex-start;

        gap: 5px;
    }

    .rn-footer-bottom-left
    .rn-footer-dot {
        display: none;
    }

    .rn-footer-top > span {
        display: none;
    }
}