/* =========================================================
   Dizzt's Shoal
   nelgplus.css

   Never Ending Level Game ++
   ========================================================= */


/* =========================================================
   1. Page
   ========================================================= */

.nelgplus-page {
    min-width: 0;
}


.nelgplus-main {
    position: relative;

    overflow: hidden;

    min-height: 70vh;
}


.nelgplus-site-background {
    opacity: 1;
}


/* =========================================================
   2. GAME SECTION
   ========================================================= */

.game-section {
    position: relative;

    padding:
        4rem 0
        5.5rem;

    background:
        linear-gradient(
            180deg,
            rgba(191, 221, 240, 0.16),
            rgba(234, 246, 252, 0.08)
        );
}


.game-container {
    width:
        min(
            94%,
            1200px
        );

    max-width:
        1200px;
}


/* =========================================================
   3. Game Card
   ========================================================= */

.game-card {
    position: relative;

    width:
        100%;

    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        0;

    overflow:
        hidden;


    background:
        linear-gradient(
            145deg,

            rgba(
                255,
                255,
                255,
                0.94
            ),

            rgba(
                255,
                255,
                255,
                0.81
            )
        );


    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.92
        );


    border-radius:
        30px;


    box-shadow:
        0 18px 44px
        rgba(
            52,
            103,
            135,
            0.17
        ),

        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.92
        );


    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* =========================================================
   4. Game Toolbar
   ========================================================= */

.game-toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;


    width:
        100%;

    min-height:
        60px;


    padding:
        0.75rem
        1rem;


    background:
        rgba(
            255,
            255,
            255,
            0.70
        );


    border-bottom:
        1px solid
        rgba(
            140,
            192,
            235,
            0.22
        );
}


.game-toolbar-info,
.game-toolbar-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        0.55rem;
}


.game-status-dot {
    display:
        inline-block;


    width:
        9px;

    height:
        9px;


    background:
        #ACCFA3;


    border-radius:
        50%;


    box-shadow:
        0 0 0 4px
        rgba(
            172,
            207,
            163,
            0.18
        );
}


.game-toolbar-label,
.game-toolbar-separator {
    color:
        #315A73;


    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.66rem;

    font-weight:
        600;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


/* =========================================================
   5. Toolbar Buttons
   ========================================================= */

.game-toolbar-button {
    appearance:
        none;


    padding:
        0.5rem
        0.9rem;


    color:
        #214C69;


    background:
        linear-gradient(
            135deg,

            rgba(
                191,
                221,
                240,
                0.76
            ),

            rgba(
                255,
                235,
                204,
                0.82
            )
        );


    border:
        1px solid
        rgba(
            140,
            192,
            235,
            0.42
        );


    border-radius:
        999px;


    box-shadow:
        0 3px 8px
        rgba(
            48,
            93,
            120,
            0.09
        );


    font-family:
        var(--font-body);

    font-size:
        0.95rem;

    font-weight:
        600;


    cursor:
        pointer;


    transition:
        transform
        180ms ease,

        box-shadow
        180ms ease,

        background
        180ms ease;
}


.game-toolbar-button:hover {
    transform:
        translateY(-1px);


    background:
        linear-gradient(
            135deg,

            #BFDDF0,

            #FFEBCC
        );


    box-shadow:
        0 5px 12px
        rgba(
            48,
            93,
            120,
            0.13
        );
}


/* =========================================================
   6. LARGE GAME SCREEN
   ========================================================= */

.game-frame-shell {
    position:
        relative;


    /*
       Desktop maximum:
       1080 × 810
    */

    width:
        min(
            96%,
            1080px
        );


    max-width:
        1080px;


    aspect-ratio:
        4 / 3;


    height:
        auto;


    margin:
        1.4rem auto;


    overflow:
        hidden;


    background:
        #080808;


    border:
        3px solid
        rgba(
            36,
            87,
            127,
            0.34
        );


    border-radius:
        18px;


    box-shadow:
        0 14px 32px
        rgba(
            20,
            55,
            78,
            0.20
        );
}


/* =========================================================
   7. Game Iframe
   ========================================================= */

.game-frame {
    display:
        block;


    position:
        absolute;


    inset:
        0;


    width:
        100%;


    height:
        100%;


    margin:
        0;


    padding:
        0;


    border:
        0;


    background:
        #000000;
}


/* =========================================================
   8. Click To Play Overlay
   ========================================================= */

.game-focus-overlay {
    position:
        absolute;


    inset:
        0;


    z-index:
        10;


    display:
        flex;


    flex-direction:
        column;


    align-items:
        center;


    justify-content:
        center;


    gap:
        0.7rem;


    width:
        100%;


    height:
        100%;


    padding:
        2rem;


    color:
        #203D50;


    background:
        linear-gradient(
            145deg,

            rgba(
                191,
                221,
                240,
                0.91
            ),

            rgba(
                255,
                235,
                204,
                0.91
            )
        );


    border:
        0;


    font-family:
        var(--font-body);


    text-align:
        center;


    cursor:
        pointer;


    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.game-focus-overlay.is-hidden {
    display:
        none;
}


/* =========================================================
   9. Play Icon
   ========================================================= */

.game-focus-icon {
    display:
        grid;


    place-items:
        center;


    width:
        72px;


    height:
        72px;


    padding-left:
        4px;


    color:
        #FFFFFF;


    background:
        #8CC0EB;


    border:
        4px solid
        rgba(
            255,
            255,
            255,
            0.82
        );


    border-radius:
        50%;


    box-shadow:
        0 10px 24px
        rgba(
            53,
            104,
            138,
            0.20
        );


    font-size:
        1.45rem;
}


.game-focus-title {
    font-family:
        var(--font-title);


    font-size:
        clamp(
            2.1rem,
            4vw,
            3.2rem
        );


    line-height:
        1;
}


.game-focus-description {
    max-width:
        480px;


    color:
        #465F6D;


    font-size:
        1rem;


    line-height:
        1.55;
}


/* =========================================================
   10. Game Help
   ========================================================= */

.game-help-bar {
    display:
        flex;


    flex-wrap:
        wrap;


    align-items:
        center;


    justify-content:
        center;


    gap:
        0.5rem
        1.4rem;


    width:
        100%;


    padding:
        0 1rem
        1.3rem;


    color:
        #496472;


    font-size:
        0.95rem;


    line-height:
        1.5;


    text-align:
        center;
}


/* =========================================================
   11. GAME INFORMATION
   ========================================================= */

.game-info-section {
    position:
        relative;


    padding:
        4rem 0
        5.5rem;


    background:
        linear-gradient(
            180deg,

            rgba(
                234,
                246,
                252,
                0.06
            ),

            rgba(
                191,
                221,
                240,
                0.18
            )
        );
}


.game-info-container {
    width:
        min(
            92%,
            1180px
        );


    max-width:
        1180px;
}


/* =========================================================
   12. Section Heading
   ========================================================= */

.nelgplus-section-heading {
    display:
        flex;


    flex-direction:
        column;


    align-items:
        flex-start;


    margin-bottom:
        1.5rem;
}


/* =========================================================
   13. Small Label
   ========================================================= */

.nelgplus-page .section-eyebrow {
    display:
        flex;


    align-items:
        center;


    width:
        fit-content;


    margin:
        0 0
        0.75rem;


    padding:
        0.3rem
        0.78rem;


    color:
        #214C69 !important;


    background:
        rgba(
            255,
            235,
            204,
            0.92
        );


    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.85
        );


    border-radius:
        999px;


    box-shadow:
        0 4px 10px
        rgba(
            35,
            75,
            100,
            0.08
        );


    font-family:
        var(--font-mono);


    font-size:
        0.68rem;


    font-weight:
        700;


    font-variation-settings:
        "MONO" 1;


    letter-spacing:
        0.13em;


    line-height:
        1.25;


    text-transform:
        uppercase;


    text-shadow:
        none;


    opacity:
        1;
}


.nelgplus-page .section-eyebrow::before {
    content:
        "·";


    margin-right:
        0.4rem;


    color:
        #ACCFA3;
}


.nelgplus-page .section-eyebrow::after {
    content:
        "·";


    margin-left:
        0.4rem;


    color:
        #8CC0EB;
}


/* =========================================================
   14. About The Game Title
   ========================================================= */

.nelgplus-page .section-title.gradient-title {
    display:
        inline-block;


    width:
        fit-content;


    margin:
        0;


    background:
        linear-gradient(
            108deg,

            #8CC0EB 0%,

            #BFDDF0 30%,

            #DCE7DC 62%,

            #FFEBCC 100%
        );


    background-clip:
        text;


    -webkit-background-clip:
        text;


    color:
        #8CC0EB;


    -webkit-text-fill-color:
        transparent;


    -webkit-text-stroke:
        1.55px
        rgba(
            18,
            20,
            22,
            0.95
        );


    paint-order:
        stroke fill;


    text-shadow:
        none;


    filter:
        drop-shadow(
            0 4px 4px
            rgba(
                20,
                40,
                55,
                0.14
            )
        );
}


/* =========================================================
   15. Information Card
   ========================================================= */

.game-info-card {
    position:
        relative;


    padding:
        clamp(
            1.5rem,
            3vw,
            2rem
        );


    background:
        linear-gradient(
            145deg,

            rgba(
                255,
                255,
                255,
                0.93
            ),

            rgba(
                255,
                255,
                255,
                0.79
            )
        );


    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.88
        );


    border-radius:
        28px;


    box-shadow:
        0 13px 30px
        rgba(
            54,
            112,
            150,
            0.11
        );


    backdrop-filter:
        blur(12px);


    -webkit-backdrop-filter:
        blur(12px);
}


/* =========================================================
   16. Card Icon
   ========================================================= */

.game-info-icon {
    display:
        grid;


    place-items:
        center;


    width:
        54px;


    height:
        54px;


    margin-bottom:
        0.85rem;


    background:
        rgba(
            191,
            221,
            240,
            0.46
        );


    border-radius:
        18px;


    font-size:
        1.6rem;
}


/* =========================================================
   17. Card Label
   ========================================================= */

.game-info-card .card-label {
    display:
        inline-flex;


    width:
        fit-content;


    margin:
        0 0
        0.6rem;


    padding:
        0.25rem
        0.65rem;


    color:
        #214C69 !important;


    background:
        rgba(
            191,
            221,
            240,
            0.58
        );


    border-radius:
        999px;


    font-family:
        var(--font-mono);


    font-size:
        0.64rem;


    font-weight:
        700;


    font-variation-settings:
        "MONO" 1;


    letter-spacing:
        0.09em;


    opacity:
        1;
}


/* =========================================================
   18. Card Title
   ========================================================= */

.game-info-title {
    margin:
        0 0
        0.9rem;


    color:
        #28383F;


    font-family:
        var(--font-title);


    font-size:
        clamp(
            2rem,
            3.5vw,
            2.8rem
        );


    line-height:
        1.1;
}


/* =========================================================
   19. Information Text
   ========================================================= */

.game-info-card p {
    color:
        #405965;


    font-size:
        1.08rem;


    line-height:
        1.75;
}


/* =========================================================
   20. Game Metadata
   ========================================================= */

.nelgplus-meta {
    display:
        grid;


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


    gap:
        0.75rem;


    margin-top:
        1.6rem;
}


.nelgplus-meta-item {
    padding:
        0.9rem
        1rem;


    background:
        rgba(
            191,
            221,
            240,
            0.27
        );


    border:
        1px solid
        rgba(
            140,
            192,
            235,
            0.26
        );


    border-radius:
        16px;
}


.nelgplus-meta-label {
    display:
        block;


    margin-bottom:
        0.3rem;


    color:
        #426C86;


    font-family:
        var(--font-mono);


    font-size:
        0.62rem;


    font-weight:
        700;


    font-variation-settings:
        "MONO" 1;


    letter-spacing:
        0.08em;


    text-transform:
        uppercase;
}


.nelgplus-meta-value {
    display:
        block;


    color:
        #304A59;


    font-size:
        1rem;


    font-weight:
        600;


    line-height:
        1.45;
}


.nelgplus-meta-value small {
    display:
        inline-block;


    margin-left:
        0.2rem;


    font-size:
        0.85em;


    font-weight:
        500;


    opacity:
        0.78;
}


/* =========================================================
   21. Project Links
   ========================================================= */

.nelgplus-link-row {
    display:
        grid;


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


    gap:
        0.85rem;


    margin-top:
        1rem;
}


.nelgplus-project-link {
    display:
        flex;


    align-items:
        center;


    justify-content:
        space-between;


    gap:
        1rem;


    padding:
        0.85rem
        1rem;


    color:
        #315D77;


    background:
        rgba(
            255,
            255,
            255,
            0.72
        );


    border:
        1px solid
        rgba(
            140,
            192,
            235,
            0.27
        );


    border-radius:
        16px;


    box-shadow:
        0 7px 18px
        rgba(
            54,
            112,
            150,
            0.08
        );


    font-weight:
        700;


    text-decoration:
        none;


    transition:
        transform
        180ms ease,

        background
        180ms ease;
}


.nelgplus-project-link:hover {
    transform:
        translateY(-2px);


    background:
        rgba(
            255,
            255,
            255,
            0.90
        );
}


/* =========================================================
   22. Ocean
   ========================================================= */

.nelgplus-ocean {
    position:
        relative;


    height:
        115px;


    overflow:
        hidden;


    pointer-events:
        none;
}


.nelgplus-ocean-wave {
    position:
        absolute;


    left:
        -8%;


    width:
        116%;


    height:
        100%;
}


.nelgplus-ocean-wave.ocean-back {
    bottom:
        -16%;


    background:
        rgba(
            191,
            221,
            240,
            0.72
        );


    clip-path:
        polygon(
            0 54%,
            8% 42%,
            17% 52%,
            26% 39%,
            35% 50%,
            45% 38%,
            55% 51%,
            64% 40%,
            74% 52%,
            84% 39%,
            93% 50%,
            100% 43%,
            100% 100%,
            0 100%
        );


    animation:
        nelgOceanBack
        18s
        ease-in-out
        infinite alternate;
}


.nelgplus-ocean-wave.ocean-front {
    bottom:
        -30%;


    background:
        rgba(
            140,
            192,
            235,
            0.78
        );


    clip-path:
        polygon(
            0 49%,
            9% 38%,
            18% 50%,
            28% 39%,
            38% 53%,
            48% 40%,
            58% 50%,
            68% 37%,
            78% 49%,
            88% 40%,
            100% 50%,
            100% 100%,
            0 100%
        );


    animation:
        nelgOceanFront
        12s
        ease-in-out
        infinite alternate;
}


@keyframes nelgOceanBack {

    from {
        transform:
            translateX(-2%);
    }


    to {
        transform:
            translateX(3%)
            translateY(-3px);
    }

}


@keyframes nelgOceanFront {

    from {
        transform:
            translateX(2%);
    }


    to {
        transform:
            translateX(-3%)
            translateY(-5px);
    }

}


/* =========================================================
   23. Shore
   ========================================================= */

.nelgplus-shore {
    position:
        relative;


    min-height:
        220px;


    padding:
        2rem 0;


    overflow:
        hidden;


    background:
        linear-gradient(
            180deg,

            #FFF0DA 0%,

            #FFEBCC 60%,

            #F4D9B1 100%
        );
}


.nelgplus-shore-inner {
    position:
        relative;


    min-height:
        170px;
}


.nelgplus-shore-message {
    position:
        absolute;


    top:
        50%;


    left:
        50%;


    width:
        min(
            90%,
            520px
        );


    margin:
        0;


    transform:
        translate(
            -50%,
            -50%
        );


    color:
        rgba(
            57,
            65,
            68,
            0.64
        );


    text-align:
        center;
}


.nelgplus-shore-shell,
.nelgplus-shore-starfish,
.nelgplus-shore-crab {
    position:
        absolute;


    filter:
        drop-shadow(
            0 6px 5px
            rgba(
                105,
                87,
                65,
                0.13
            )
        );
}


.nelgplus-shore-shell {
    left:
        5%;


    top:
        20%;


    width:
        clamp(
            50px,
            6vw,
            80px
        );
}


.nelgplus-shore-starfish {
    right:
        20%;


    top:
        18%;


    width:
        clamp(
            48px,
            6vw,
            76px
        );
}


.nelgplus-shore-crab {
    right:
        5%;


    bottom:
        5%;


    width:
        clamp(
            60px,
            7vw,
            96px
        );
}


/* =========================================================
   24. Game Mode
   ========================================================= */

body.game-input-locked {
    position:
        fixed;


    left:
        0;


    right:
        0;


    width:
        100%;


    overflow:
        hidden;


    overscroll-behavior:
        none;
}


/* =========================================================
   25. Exit Game Mode
   ========================================================= */

.exit-game-mode {
    position:
        fixed;


    top:
        18px;


    right:
        18px;


    z-index:
        99999;


    padding:
        0.65rem
        1rem;


    color:
        #163143;


    background:
        rgba(
            255,
            235,
            204,
            0.97
        );


    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.92
        );


    border-radius:
        999px;


    box-shadow:
        0 8px 24px
        rgba(
            20,
            55,
            78,
            0.22
        );


    font-family:
        var(--font-body);


    font-size:
        0.95rem;


    font-weight:
        700;


    cursor:
        pointer;
}


.exit-game-mode[hidden] {
    display:
        none;
}


/* =========================================================
   26. Tablet / Mobile
   ========================================================= */

@media (max-width: 767px) {


    .game-section {
        padding:
            2.5rem 0
            4rem;
    }


    .game-container,
    .game-info-container {
        width:
            95%;
    }


    .game-card {
        border-radius:
            23px;
    }


    .game-toolbar {
        align-items:
            flex-start;


        flex-direction:
            column;
    }


    .game-toolbar-actions {
        width:
            100%;


        flex-wrap:
            wrap;
    }


    .game-toolbar-button {
        flex:
            1 1
            130px;
    }


    .game-frame-shell {
        width:
            calc(
                100% - 1rem
            );


        margin:
            0.8rem auto
            1rem;


        border-radius:
            13px;
    }


    .game-help-bar {
        align-items:
            flex-start;


        flex-direction:
            column;


        text-align:
            left;
    }


    .game-info-section {
        padding:
            3rem 0
            4rem;
    }


    .nelgplus-meta {
        grid-template-columns:
            1fr;
    }


    .nelgplus-link-row {
        grid-template-columns:
            1fr;
    }


    .nelgplus-shore-message {
        width:
            65%;
    }

}


/* =========================================================
   27. Small Mobile
   ========================================================= */

@media (max-width: 480px) {


    .game-focus-icon {
        width:
            60px;


        height:
            60px;
    }


    .game-focus-title {
        font-size:
            2rem;
    }


    .game-focus-description {
        font-size:
            0.9rem;
    }


    .nelgplus-shore-starfish {
        right:
            3%;
    }


    .nelgplus-shore-shell {
        left:
            2%;
    }


    .nelgplus-shore-crab {
        right:
            2%;
    }

}


/* =========================================================
   28. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {


    .nelgplus-ocean-wave {
        animation:
            none !important;
    }

}