/* =========================================
   SMP VANILA
   MAIN CSS
========================================= */


/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;

    min-height: 100vh;
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    color: white;

    font-family: Arial, sans-serif;

    background: #111;
}


/* =========================================
   BACKGROUND
========================================= */

body::before {
    content: "";

    position: fixed;

    inset: -30px;

    z-index: -5;

    background:
        url("images/background.jpg")
        center center / cover
        no-repeat;

    filter: blur(3px);

    transform: scale(1.05);

    animation:
        backgroundMove
        20s ease-in-out
        infinite alternate;
}


body::after {
    content: "";

    position: fixed;

    top: -100px;
    left: -100px;
    right: -100px;
    bottom: -100px;

    z-index: -4;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.38) 35%,
            rgba(0, 0, 0, 0.54) 70%,
            rgba(0, 0, 0, 0.76) 100%
        );
}


@keyframes backgroundMove {

    from {
        transform:
            scale(1.05)
            translate(-5px, -3px);
    }

    to {
        transform:
            scale(1.08)
            translate(5px, 3px);
    }

}


/* =========================================
   PAGE TRANSITION
========================================= */

#transition {
    position: fixed;

    inset: 0;

    z-index: 9999;

    pointer-events: none;

    background: #111;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}


#transition.show {
    opacity: 1;
}


/* =========================================
   TOP GOAL
========================================= */

.top {
    position: sticky;

    top: 0;

    z-index: 100;

    padding: 12px 20px;

    background:
        rgba(10, 15, 10, 0.92);

    border-bottom:
        3px solid rgba(255,255,255,0.12);

    backdrop-filter:
        blur(10px);
}


.top-inner {
    max-width: 1300px;

    margin: auto;
}


.goal {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 7px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 10px;
}


.goal strong {
    font-size: 10px;
}


.progress {
    width: 100%;

    height: 12px;

    background: #252525;

    border:
        3px solid #111;

    box-shadow:
        inset 0 0 0 2px #555;
}


.progress-fill {
    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #4caf50,
            #8bc34a
        );

    transition:
        width 1s ease;
}


/* =========================================
   NAVIGATION
========================================= */

nav {
    position: sticky;

    top: 57px;

    z-index: 90;

    background:
        rgba(15, 15, 15, 0.93);

    border-bottom:
        3px solid #292929;

    backdrop-filter:
        blur(10px);
}


.nav-container {
    max-width: 1300px;

    margin: auto;

    min-height: 70px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.logo {
    color: white;

    text-decoration: none;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 15px;

    text-shadow:
        3px 3px #000;
}


.nav-links {
    display: flex;

    gap: 10px;
}


.nav-link {
    color: white;

    text-decoration: none;

    padding: 14px 18px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 9px;

    transition:
        transform 0.15s,
        background 0.15s;
}


.nav-link:hover {
    background: #333;

    transform:
        translateY(-2px);
}


.nav-link.active {
    background: #4c7a35;

    box-shadow:
        4px 4px 0 #1e3216;
}


.shop-link {
    background: #8b5a24;

    box-shadow:
        4px 4px 0 #4b2f12;
}


.shop-link:hover {
    background: #a86e2d;
}


/* =========================================
   SERVER STATUS WIDGET
========================================= */

.server-widget {
    position: fixed;

    right: 0;

    top: 190px;

    z-index: 200;

    width: 235px;

    transform:
        translateX(240px);

    transition:
        transform 0.25s ease;
}


.server-widget:hover {
    transform:
        translateX(0);
}


.server-widget-tab {
    position: absolute;

    left: -43px;

    top: 0;

    width: 43px;

    height: 150px;

    display: flex;

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

    writing-mode:
        vertical-rl;

    background: #4c7a35;

    border:
        3px solid #17240f;

    box-shadow:
        -5px 5px 0 rgba(0,0,0,0.5);

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 8px;

    cursor: default;
}


.server-widget-body {
    padding: 18px;

    background:
        #252525;

    border:
        4px solid #111;

    box-shadow:
        8px 8px 0 rgba(0,0,0,0.5);
}


.server-widget-title {
    margin-bottom: 14px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 10px;
}


.server-widget-line {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 10px 0;

    border-top:
        2px solid #444;

    font-size: 13px;
}


.server-status {
    font-family:
        "Press Start 2P",
        monospace;

    font-size: 8px;
}


.server-status.online {
    color: #79d34b;
}


.server-status.offline {
    color: #e35d5d;
}


.server-online {
    color: #ddd;

    font-weight: bold;
}


/* =========================================
   PAGES
========================================= */

.page {
    display: none;

    min-height: 700px;

    padding:
        80px 25px;

    width: 100%;

    overflow: hidden;
}


.page.active-page {
    display: block;
}


/* =========================================
   HERO
========================================= */

.hero {
    max-width: 1000px;

    margin: 0 auto;

    text-align: center;

    padding:
        60px 20px 90px;
}


.main-logo {
    display: block;

    width:
        min(430px, 80vw);

    height: auto;

    margin:
        0 auto 35px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 10px 0
            rgba(0,0,0,0.5)
        );

    transition:
        transform 0.25s ease;
}


.main-logo:hover {
    transform:
        translateY(-5px)
        rotate(-1deg);
}


.hero-description {
    max-width: 750px;

    margin:
        0 auto 35px;

    font-size: 18px;

    line-height: 1.8;

    text-shadow:
        2px 2px #000;
}


/* =========================================
   BUTTONS
========================================= */

.hero-buttons {
    display: flex;

    justify-content: center;

    gap: 18px;

    flex-wrap: wrap;
}


.minecraft-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 220px;

    padding:
        18px 25px;

    color: white;

    text-decoration: none;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 10px;

    border:
        3px solid #111;

    box-shadow:
        5px 5px 0 #111;

    transition:
        transform 0.12s,
        box-shadow 0.12s,
        filter 0.12s;
}


.minecraft-button:hover {
    transform:
        translate(-2px, -2px);

    box-shadow:
        7px 7px 0 #111;

    filter:
        brightness(1.12);
}


.minecraft-button:active {
    transform:
        translate(3px, 3px);

    box-shadow:
        2px 2px 0 #111;
}


.minecraft-button.primary {
    background: #4c8a3b;
}


.minecraft-button.secondary {
    background: #555;
}


/* =========================================
   HOW TO JOIN
========================================= */

.join-section {
    max-width: 1350px;

    margin:
        0 auto;

    padding:
        50px 25px 70px;
}


.pixel-heading {
    text-align: center;

    margin-bottom: 40px;
}


.pixel-heading h2 {
    margin:
        0 0 14px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 22px;

    text-shadow:
        4px 4px #000;
}


.pixel-heading p {
    margin: 0;

    color: #ccc;

    line-height: 1.6;
}


.join-grid {
    display: grid;

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

    gap: 22px;
}


.join-card {
    position: relative;

    min-height: 230px;

    padding: 30px;

    background:
        rgba(25, 25, 25, 0.94);

    border:
        4px solid #111;

    box-shadow:
        8px 8px 0 rgba(0,0,0,0.55);

    transition:
        transform 0.2s ease;
}


.join-card:hover {
    transform:
        translateY(-7px);
}


.join-number {
    position: absolute;

    top: -18px;
    left: 20px;

    width: 44px;
    height: 44px;

    display: flex;

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

    background: #4c8a3b;

    border:
        3px solid #17240f;

    box-shadow:
        4px 4px 0 #111;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 11px;
}


.join-card h3 {
    margin:
        20px 0 14px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 13px;

    line-height: 1.7;
}


.join-card p {
    color: #ccc;

    line-height: 1.7;
}


.ip-copy {
    display: flex;

    margin-top: 18px;

    background: #111;

    border:
        3px solid #333;
}


.ip-copy span {
    flex: 1;

    padding: 12px;

    font-family: monospace;

    font-size: 12px;

    word-break: break-all;
}


.ip-copy button {
    border: 0;

    padding:
        10px 13px;

    color: white;

    background: #4c8a3b;

    cursor: pointer;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 7px;
}


.ip-copy button:hover {
    filter:
        brightness(1.15);
}


/* =========================
   TERRAIN DIVIDER
   ========================= */

.terrain-divider {
    position: relative;

    /* Выходим за пределы .page, чтобы занять весь экран */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    height: clamp(180px, 32vw, 460px);

    /* Не режем изображения по вертикали */
    overflow: visible;

    pointer-events: none;
    z-index: 5;
}

/* Общие настройки слоёв */
.terrain-divider img {
    position: absolute;

    left: 50%;

    width: 140vw;
    max-width: none;

    height: 100%;

    /* Изображение может выходить за пределы самого divider */
    overflow: visible;

    pointer-events: none;
    user-select: none;

    will-change: transform;
}

/* Дальний слой */
.terrain-back {
    top: 0;

    transform:
        translate3d(-50%, var(--terrain-back-y, 0px), 0)
        scale(1.08);

    transform-origin: center center;

    z-index: 1;
}

/* Передний слой */
.terrain-front {
    top: 0;

    transform:
        translate3d(-50%, var(--terrain-front-y, 0px), 0)
        scale(1.08);

    transform-origin: center center;

    z-index: 2;
}


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

@media (max-width: 700px) {

    .terrain-divider {
        width: 100vw;

        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        /*
         * Высота остаётся адаптивной.
         * Изображения могут свободно выходить вверх/вниз.
         */
        height: clamp(170px, 42vw, 300px);

        overflow: visible;
    }

    .terrain-divider img {
        width: 150vw;
        height: 100%;
    }

    .terrain-back {
        transform:
            translate3d(-50%, var(--terrain-back-y, 0px), 0)
            scale(1.08);
    }

    .terrain-front {
        transform:
            translate3d(-50%, var(--terrain-front-y, 0px), 0)
            scale(1.08);
    }
}


/* =========================================
   PROJECT SECTION
========================================= */

.project-section {
    position: relative;

    margin:
        0 -25px;

    padding:
        90px 25px 100px;

    background:
        url("images/cave.jpg")
        center center / cover
        fixed
        no-repeat;
}


.project-inner {
    max-width: 1250px;

    margin: auto;
}


.project-heading {
    max-width: 850px;

    margin:
        0 auto 50px;

    text-align: center;
}


.minecraft-badge {
    display: inline-block;

    margin-bottom: 18px;

    padding:
        10px 14px;

    color: white;

    background: #4c7a35;

    border:
        3px solid #17240f;

    box-shadow:
        4px 4px 0 #111;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 8px;
}


.project-heading h2 {
    margin:
        0 0 20px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 25px;

    line-height: 1.6;

    text-shadow:
        4px 4px #000;
}


.project-heading p {
    color: #ddd;

    font-size: 17px;

    line-height: 1.8;
}


.project-grid {
    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    gap: 28px;
}


.project-card {
    padding: 35px;

    background:
        rgba(18,18,18,0.91);

    border:
        4px solid #111;

    box-shadow:
        9px 9px 0 rgba(0,0,0,0.55);
}


.project-card h3 {
    margin:
        0 0 20px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 14px;

    line-height: 1.8;
}


.project-card p {
    color: #d2d2d2;

    line-height: 1.8;
}


.project-card p + p {
    margin-top: 16px;
}


.support-card {
    background:
        rgba(54,39,20,0.94);
}


.support-list {
    display: grid;

    gap: 12px;

    margin-top: 25px;
}


.support-item {
    padding: 14px;

    background:
        rgba(0,0,0,0.25);

    border-left:
        4px solid #8b5a24;

    color: #ddd;

    line-height: 1.5;
}


/* =========================================
   SOCIALS
========================================= */

.social-section {
    max-width: 1250px;

    margin:
        50px auto 0;
}


.social-card {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding: 35px;

    background:
        rgba(15,25,15,0.94);

    border:
        4px solid #111;

    box-shadow:
        9px 9px 0 rgba(0,0,0,0.55);
}


.social-card h3 {
    margin:
        0 0 12px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 14px;
}


.social-card p {
    margin: 0;

    color: #ccc;

    line-height: 1.6;
}


.telegram-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        17px 23px;

    color: white;

    background: #2688d9;

    border:
        3px solid #102d43;

    box-shadow:
        5px 5px 0 #071a27;

    text-decoration: none;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 9px;

    transition:
        transform 0.15s ease;
}


.telegram-button:hover {
    transform:
        translate(-2px,-2px);
}


/* =========================================
   GALLERY
========================================= */

.gallery-page {
    max-width: 1400px;

    margin:
        0 auto;

    padding:
        70px 25px;
}


#gallery {
    position: relative;
}


.section-header {
    text-align: center;

    margin-bottom: 45px;
}


.section-header h2 {
    margin:
        0 0 20px;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 28px;

    text-shadow:
        4px 4px #000;
}


.section-header p {
    color: #ddd;

    font-size: 17px;
}


.gallery {
    display: grid;

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

    gap: 25px;
}


.gallery-item {
    min-width: 0;

    padding: 10px;

    background: #eee;

    border:
        4px solid #111;

    box-shadow:
        7px 7px 0 rgba(0,0,0,0.65);

    transition:
        transform 0.2s ease;
}


.gallery-item:hover {
    transform:
        translateY(-5px)
        rotate(-1deg);
}


.gallery-placeholder {
    width: 100%;

    height: 300px;

    overflow: hidden;

    padding: 0;
    margin: 0;

    background: #222;
}


.gallery-placeholder img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.3s ease;
}


.gallery-item:hover
.gallery-placeholder img {
    transform:
        scale(1.03);
}


.gallery-home-button {
    display: flex;

    width: fit-content;

    margin:
        45px auto 0;
}


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

footer {
    padding:
        45px 20px;

    text-align: center;

    background:
        rgba(10,10,10,0.95);

    border-top:
        4px solid #222;
}


.footer-logo {
    font-family:
        "Press Start 2P",
        monospace;

    font-size: 15px;

    margin-bottom: 15px;
}


footer p {
    color: #aaa;
}


footer span {
    color: #666;

    font-size: 12px;
}


/* =========================================
   HELP BUTTON
========================================= */

.help-button {
    display: inline-flex;

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

    gap: 25px;

    margin-top: 0;

    min-width: 230px;

    padding:
        14px 17px;

    color: white;

    background: #4c7a35;

    border:
        3px solid #17240f;

    box-shadow:
        5px 5px 0 #111;

    text-decoration: none;

    font-family:
        "Press Start 2P",
        monospace;

    font-size: 8px;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}


.help-button:hover {
    transform:
        translate(-2px, -2px);

    box-shadow:
        7px 7px 0 #111;

    filter:
        brightness(1.12);
}


.help-button:active {
    transform:
        translate(3px, 3px);

    box-shadow:
        2px 2px 0 #111;
}


.help-arrow {
    font-size: 16px;

    line-height: 1;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .server-widget {
        display: none;
    }


    .join-grid {
        grid-template-columns:
            1fr;
    }


    .project-grid {
        grid-template-columns:
            1fr;
    }


    .social-card {
        flex-direction: column;

        align-items: flex-start;
    }


    .gallery {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .terrain-divider {
        height: 300px;

        margin:
            0 0 55px;
    }


    .terrain-divider img {
        width: 1100px;

        height: 300px;
    }


    .gallery-placeholder {
        height: 240px;
    }

}


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

@media (max-width: 600px) {

    .top {
        padding:
            10px 12px;
    }


    .goal {
        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

        font-size: 8px;
    }


    .goal strong {
        font-size: 8px;
    }


    nav {
        top: 58px;
    }


    .nav-container {
        flex-direction: column;

        gap: 15px;

        padding: 15px;
    }


    .nav-links {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 6px;
    }


    .nav-link {
        padding:
            10px 8px;

        font-size: 7px;
    }


    .logo {
        font-size: 12px;
    }


    .page {
        padding:
            50px 15px;
    }


    .hero {
        padding:
            35px 5px 70px;
    }


    .main-logo {
        width: 90vw;
    }


    .hero-description {
        font-size: 14px;

        line-height: 1.7;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }


    .minecraft-button {
        width: 100%;

        min-width: 0;
    }


    .join-section {
        padding:
            40px 0 60px;
    }


    .pixel-heading h2 {
        font-size: 17px;

        line-height: 1.7;
    }


    .join-card {
        padding: 25px;
    }


    .ip-copy {
        flex-direction: column;
    }


    .ip-copy button {
        width: 100%;

        padding:
            14px;
    }


    /* MOBILE TERRAIN */

    .terrain-divider {

        width: 100%;

        height: 230px;

        margin:
            0 0 45px;

        overflow: hidden;

    }


    .terrain-divider img {

        width: 850px;

        height: 230px;

        top: 0;

    }


    .project-section {

        padding:
            65px 15px 75px;

        margin:
            0 -15px;

    }


    .project-card {
        padding: 25px;
    }


    .project-heading h2 {
        font-size: 19px;
    }


    .project-heading p {
        font-size: 14px;
    }


    .social-card {
        padding: 25px;
    }


    .telegram-button {
        width: 100%;
    }


    .gallery-page {
        padding:
            50px 10px;
    }


    .gallery {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .gallery-placeholder {
        height: auto;

        aspect-ratio:
            16 / 10;
    }


    .gallery-home-button {
        width: 100%;
    }


    footer {
        padding:
            35px 15px;
    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 380px) {

    .nav-link {
        font-size: 6px;

        padding:
            9px 6px;
    }


    .logo {
        font-size: 10px;
    }


    .pixel-heading h2 {
        font-size: 15px;
    }


    .project-heading h2 {
        font-size: 17px;
    }

}