/* =========================================================
   YEW — GAMES PAGE
========================================================= */


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.games-body {
    margin: 0;

    min-height: 100vh;

    position: relative;

    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 10% 12%,
            rgba(255, 209, 226, 0.55),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(213, 224, 255, 0.62),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 92%,
            rgba(223, 244, 229, 0.62),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #fffafd 0%,
            #fbfaff 45%,
            #fffdf8 100%
        );

    color: #343142;

    font-family: "Manrope", sans-serif;
}


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

.games-background {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.games-shape {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    opacity: 0.72;
}


.shape-one {
    width: 390px;
    height: 390px;

    top: 210px;
    left: -190px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 195, 215, 0.34),
            rgba(255, 234, 241, 0.14)
        );
}


.shape-two {
    width: 500px;
    height: 500px;

    top: 750px;
    right: -260px;

    background:
        linear-gradient(
            145deg,
            rgba(187, 204, 255, 0.28),
            rgba(229, 235, 255, 0.12)
        );
}


.shape-three {
    width: 420px;
    height: 420px;

    bottom: 80px;
    left: 12%;

    background:
        linear-gradient(
            145deg,
            rgba(193, 235, 209, 0.30),
            rgba(237, 250, 241, 0.12)
        );
}


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

.games-star {
    position: absolute;

    color: rgba(143, 123, 214, 0.16);

    font-family: "Fredoka", sans-serif;

    user-select: none;
}


.star-one {
    top: 190px;
    right: 8%;

    font-size: 40px;

    transform: rotate(13deg);
}


.star-two {
    top: 580px;
    left: 5%;

    font-size: 27px;

    color: rgba(239, 169, 93, 0.20);

    transform: rotate(-12deg);
}


.star-three {
    top: 1250px;
    right: 5%;

    font-size: 35px;

    color: rgba(104, 179, 151, 0.19);

    transform: rotate(17deg);
}


.star-four {
    bottom: 260px;
    left: 8%;

    font-size: 25px;

    color: rgba(218, 132, 170, 0.17);
}


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

.games-word {
    position: absolute;

    font-family: "Fredoka", sans-serif;

    font-weight: 700;

    letter-spacing: 5px;

    color: rgba(143, 123, 214, 0.065);

    user-select: none;
}


.word-one {
    top: 390px;
    right: -20px;

    font-size: 58px;

    transform: rotate(90deg);
}


.word-two {
    top: 1050px;
    left: -25px;

    font-size: 50px;

    transform: rotate(-90deg);
}


.word-three {
    bottom: 340px;
    right: 2%;

    font-size: 44px;

    transform: rotate(7deg);
}


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

.games-body header {
    position: relative;

    z-index: 20;

    width: 100%;

    padding: 22px 24px 0;
}


/* =========================================================
   NAV
========================================================= */

.games-body nav {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 14px 18px 14px 26px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

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

    border:
        1px solid
        rgba(143, 123, 214, 0.13);

    border-radius: 24px;

    box-shadow:
        0 12px 32px
        rgba(72, 58, 130, 0.09);

    backdrop-filter: blur(14px);

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


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

.games-body .logo {
    margin: 0;

    padding: 12px 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #b29cf7
        );

    border-radius: 16px;

    color: white;

    font-family: "Fredoka", sans-serif;

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 2px;

    text-decoration: none;

    box-shadow:
        0 8px 20px
        rgba(113, 91, 190, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.games-body .logo:hover {
    transform:
        translateY(-2px)
        rotate(-2deg);

    box-shadow:
        0 11px 25px
        rgba(113, 91, 190, 0.30);
}


/* =========================================================
   NAV LINKS
========================================================= */

.games-body .nav-links {
    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    gap: 7px;

    list-style: none;
}


.games-body .nav-links li {
    margin: 0;
    padding: 0;
}


.games-body .nav-links a {
    display: block;

    padding: 11px 18px;

    border-radius: 14px;

    color: #4c4960;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.games-body .nav-links a:hover {
    background: #f1edff;

    color: #725fc2;

    transform: translateY(-2px);
}


.games-body .nav-links a.active {
    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #a994ed
        );

    color: white;

    box-shadow:
        0 6px 15px
        rgba(115, 94, 190, 0.18);
}


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

.games-container {
    position: relative;

    z-index: 2;

    width: min(1120px, 90%);

    margin: 0 auto;

    padding: 62px 0 90px;
}


/* =========================================================
   HOW TO USE
========================================================= */

.how-to-use {
    position: relative;

    padding: 46px;

    overflow: hidden;

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

    border:
        1px solid
        rgba(
            143,
            123,
            214,
            0.11
        );

    border-radius: 36px;

    box-shadow:
        0 18px 45px
        rgba(
            74,
            61,
            122,
            0.09
        );

    backdrop-filter: blur(12px);

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


.how-to-use::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -100px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background:
        rgba(
            199,
            185,
            244,
            0.17
        );

    pointer-events: none;
}


.how-to-use::after {
    content: "";

    position: absolute;

    left: -80px;
    bottom: -100px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background:
        rgba(
            255,
            218,
            180,
            0.18
        );

    pointer-events: none;
}


/* =========================================================
   HOW HEADING
========================================================= */

.how-heading {
    position: relative;

    z-index: 2;

    max-width: 720px;

    margin-bottom: 35px;
}


.section-label {
    display: inline-block;

    margin-bottom: 10px;

    color: #8f7bd6;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.how-heading h1 {
    margin: 0 0 15px;

    color: #343142;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(36px, 5vw, 52px);

    font-weight: 650;

    line-height: 1.1;

    letter-spacing: -0.5px;
}


.how-heading p {
    max-width: 650px;

    margin: 0;

    color: #5f5b70;

    font-size: 17px;

    font-weight: 550;

    line-height: 1.75;
}


/* =========================================================
   STEPS GRID
========================================================= */

.how-steps {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 16px;
}


/* =========================================================
   STEP
========================================================= */

.how-step {
    min-width: 0;

    display: flex;

    align-items: flex-start;

    gap: 17px;

    padding: 23px;

    background:
        rgba(
            249,
            247,
            255,
            0.88
        );

    border:
        1px solid
        rgba(
            143,
            123,
            214,
            0.09
        );

    border-radius: 24px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.how-step:hover {
    transform: translateY(-4px);

    background: white;

    box-shadow:
        0 12px 26px
        rgba(
            91,
            74,
            151,
            0.09
        );
}


/* =========================================================
   STEP NUMBER
========================================================= */

.step-number {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #8f7bd6,
            #b5a2f3
        );

    border-radius: 15px;

    color: white;

    font-family: "Fredoka", sans-serif;

    font-size: 20px;

    font-weight: 700;

    box-shadow:
        0 7px 16px
        rgba(
            117,
            94,
            193,
            0.18
        );
}


/* =========================================================
   STEP CONTENT
========================================================= */

.step-content {
    min-width: 0;
}


.step-content h2 {
    margin: 1px 0 7px;

    color: #343142;

    font-family: "Fredoka", sans-serif;

    font-size: 19px;

    font-weight: 600;

    line-height: 1.25;
}


.step-content h2::after {
    display: none;
}


.step-content p {
    margin: 0;

    color: #686477;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.65;
}


.step-content strong {
    color: #514878;

    font-weight: 750;
}


/* =========================================================
   TIP
========================================================= */

.games-tip {
    position: relative;

    z-index: 2;

    margin-top: 18px;

    padding: 19px 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    background:
        linear-gradient(
            135deg,
            #fff7dc,
            #fffaf0
        );

    border:
        1px solid
        rgba(
            226,
            180,
            79,
            0.18
        );

    border-radius: 22px;
}


.tip-symbol {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    border-radius: 14px;

    font-size: 22px;

    box-shadow:
        0 5px 14px
        rgba(
            162,
            127,
            51,
            0.08
        );
}


.games-tip strong {
    display: block;

    margin-bottom: 3px;

    color: #6c5834;

    font-size: 14px;

    font-weight: 800;
}


.games-tip p {
    margin: 0;

    color: #76694f;

    font-size: 14px;

    font-weight: 550;

    line-height: 1.55;
}


/* =========================================================
   PLATFORMS SECTION
========================================================= */

.platforms-section {
    margin-top: 85px;
}


/* =========================================================
   PLATFORMS HEADING
========================================================= */

.platforms-heading {
    max-width: 700px;

    margin:
        0 auto
        40px;

    text-align: center;
}


.platforms-heading h2 {
    margin: 0 0 15px;

    color: #343142;

    font-family: "Fredoka", sans-serif;

    font-size: clamp(34px, 5vw, 48px);

    font-weight: 650;

    line-height: 1.15;
}


.platforms-heading h2::after {
    display: none;
}


.platforms-heading p {
    max-width: 630px;

    margin: 0 auto;

    color: #666273;

    font-size: 16px;

    font-weight: 550;

    line-height: 1.75;
}


/* =========================================================
   PLATFORM GRID
========================================================= */

.platforms-grid {
    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PLATFORM CARD
========================================================= */

.platform-card {
    min-width: 0;

    min-height: 330px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(
            75,
            69,
            91,
            0.07
        );

    border-radius: 30px;

    box-shadow:
        0 12px 28px
        rgba(
            63,
            57,
            85,
            0.07
        );

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.platform-card::before {
    content: "";

    position: absolute;

    top: -70px;
    right: -65px;

    width: 190px;
    height: 190px;

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

    border-radius: 50%;

    pointer-events: none;
}


.platform-card::after {
    content: "✦";

    position: absolute;

    top: 26px;
    right: 27px;

    color:
        rgba(
            76,
            68,
            96,
            0.12
        );

    font-size: 23px;

    pointer-events: none;
}


.platform-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 38px
        rgba(
            63,
            57,
            85,
            0.11
        );
}


/* =========================================================
   PLATFORM COLORS
========================================================= */

.platform-yellow {
    background:
        linear-gradient(
            145deg,
            #fff2c9,
            #fff8e2
        );
}


.platform-blue {
    background:
        linear-gradient(
            145deg,
            #ddecff,
            #eff6ff
        );
}


.platform-purple {
    background:
        linear-gradient(
            145deg,
            #e8e0ff,
            #f4f0ff
        );
}


.platform-green {
    background:
        linear-gradient(
            145deg,
            #dff3e4,
            #eef9f1
        );
}


.platform-pink {
    background:
        linear-gradient(
            145deg,
            #f9dfeb,
            #fff0f6
        );
}


.platform-orange {
    background:
        linear-gradient(
            145deg,
            #ffe2c9,
            #fff0e3
        );
}


.platform-mint {
    background:
        linear-gradient(
            145deg,
            #d9f2ed,
            #edf9f6
        );
}


.platform-lavender {
    background:
        linear-gradient(
            145deg,
            #e9e4f7,
            #f5f2fb
        );
}


/* =========================================================
   PLATFORM TOP
========================================================= */

.platform-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 26px;
}


.platform-number {
    color:
        rgba(
            62,
            57,
            75,
            0.45
        );

    font-family: "Fredoka", sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1px;
}


.platform-type {
    margin-right: 28px;

    padding: 7px 11px;

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

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

    border-radius: 999px;

    color: #595367;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


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

.platform-card h3 {
    position: relative;

    z-index: 2;

    margin: 0 0 11px;

    color: #312e3c;

    font-family: "Fredoka", sans-serif;

    font-size: 29px;

    font-weight: 650;

    line-height: 1.15;
}


/* =========================================================
   PLATFORM DESCRIPTION
========================================================= */

.platform-description {
    position: relative;

    z-index: 2;

    max-width: 430px;

    margin: 0 0 20px;

    color: #5f5b68;

    font-size: 15px;

    font-weight: 550;

    line-height: 1.7;
}


/* =========================================================
   TAGS
========================================================= */

.platform-tags {
    position: relative;

    z-index: 2;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 25px;
}


.platform-tags span {
    padding: 7px 11px;

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

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

    border-radius: 999px;

    color: #5a5665;

    font-size: 11px;

    font-weight: 750;
}


/* =========================================================
   PLATFORM BUTTON
========================================================= */

.platform-button {
    width: 100%;

    min-height: 54px;

    margin-top: auto;

    padding:
        13px
        19px;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

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

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

    border-radius: 17px;

    color: #423e4e;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 6px 15px
        rgba(
            62,
            56,
            79,
            0.05
        );

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.platform-button span {
    font-size: 20px;

    transition: transform 0.25s ease;
}


.platform-button:hover {
    background: white;

    transform: translateY(-2px);

    box-shadow:
        0 9px 20px
        rgba(
            62,
            56,
            79,
            0.09
        );
}


.platform-button:hover span {
    transform: translateX(5px);
}


/* =========================================================
   DISABLED BUTTON
========================================================= */

.disabled-platform-button {
    border: none;

    opacity: 0.60;

    cursor: not-allowed;
}


.disabled-platform-button:hover {
    transform: none;

    box-shadow:
        0 6px 15px
        rgba(
            62,
            56,
            79,
            0.05
        );
}


.disabled-platform-button:hover span {
    transform: none;
}


/* =========================================================
   ENDING
========================================================= */

.games-ending {
    max-width: 760px;

    margin:
        75px auto
        0;

    padding:
        25px
        30px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    text-align: center;

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

    border:
        1px solid
        rgba(
            143,
            123,
            214,
            0.10
        );

    border-radius: 25px;

    box-shadow:
        0 10px 26px
        rgba(
            72,
            58,
            130,
            0.06
        );
}


.games-ending span {
    flex-shrink: 0;

    color: #9c89db;

    font-size: 18px;
}


.games-ending p {
    margin: 0;

    color: #565263;

    font-size: 15px;

    font-weight: 650;

    line-height: 1.6;
}


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

@media (max-width: 900px) {

    .games-container {
        width: min(92%, 760px);

        padding-top: 50px;
    }


    .how-to-use {
        padding: 36px;
    }


    .how-steps {
        grid-template-columns: 1fr;
    }


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


    .platform-card {
        min-height: 310px;
    }

}


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

@media (max-width: 700px) {

    .games-body {
        width: 100%;

        overflow-x: hidden;
    }


    .games-body header {
        width: 100%;

        padding: 12px;
    }


    .games-body nav {
        width: 100%;

        max-width: none;

        padding: 16px;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 14px;

        border-radius: 20px;
    }


    .games-body .logo {
        margin: 0;

        padding: 10px 18px;

        font-size: 22px;
    }


    .games-body .nav-links {
        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 7px;
    }


    .games-body .nav-links a {
        padding: 8px 13px;

        font-size: 13px;
    }


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

    .games-container {
        width: 100%;

        padding:
            38px
            16px
            60px;
    }


    /* =====================================================
       HOW TO USE
    ===================================================== */

    .how-to-use {
        width: 100%;

        padding:
            30px
            20px;

        border-radius: 27px;
    }


    .how-heading {
        margin-bottom: 27px;
    }


    .section-label {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .how-heading h1 {
        font-size: 36px;
    }


    .how-heading p {
        font-size: 15px;

        line-height: 1.65;
    }


    .how-steps {
        gap: 12px;
    }


    .how-step {
        padding: 19px 17px;

        gap: 14px;

        border-radius: 20px;
    }


    .step-number {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        font-size: 18px;

        border-radius: 13px;
    }


    .step-content h2 {
        font-size: 17px;
    }


    .step-content p {
        font-size: 13px;
    }


    /* =====================================================
       TIP
    ===================================================== */

    .games-tip {
        align-items: flex-start;

        padding: 17px;

        border-radius: 19px;
    }


    .tip-symbol {
        width: 41px;
        height: 41px;

        flex-basis: 41px;

        font-size: 20px;
    }


    /* =====================================================
       PLATFORMS
    ===================================================== */

    .platforms-section {
        margin-top: 62px;
    }


    .platforms-heading {
        margin-bottom: 30px;

        padding:
            0
            8px;
    }


    .platforms-heading h2 {
        font-size: 35px;
    }


    .platforms-heading p {
        font-size: 15px;
    }


    .platforms-grid {
        gap: 16px;
    }


    .platform-card {
        min-height: 0;

        padding: 24px 20px;

        border-radius: 25px;
    }


    .platform-top {
        margin-bottom: 22px;
    }


    .platform-type {
        margin-right: 24px;

        font-size: 9px;
    }


    .platform-card h3 {
        font-size: 25px;
    }


    .platform-description {
        font-size: 14px;
    }


    .platform-button {
        min-height: 52px;

        font-size: 13px;
    }


    /* =====================================================
       ENDING
    ===================================================== */

    .games-ending {
        margin-top: 52px;

        padding:
            22px
            18px;

        gap: 10px;

        border-radius: 22px;
    }


    .games-ending p {
        font-size: 13px;
    }


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

    .games-word {
        display: none;
    }


    .games-star {
        opacity: 0.7;
    }


    .shape-one {
        width: 260px;
        height: 260px;

        left: -150px;
    }


    .shape-two {
        width: 300px;
        height: 300px;

        right: -190px;
    }


    .shape-three {
        width: 270px;
        height: 270px;

        left: -80px;
    }

}


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

@media (max-width: 420px) {

    .games-body .nav-links {
        gap: 5px;
    }


    .games-body .nav-links a {
        padding:
            7px
            9px;

        font-size: 12px;
    }


    .games-container {
        padding-left: 12px;

        padding-right: 12px;
    }


    .how-to-use {
        padding:
            26px
            16px;
    }


    .how-heading h1 {
        font-size: 32px;
    }


    .how-step {
        padding:
            17px
            14px;
    }


    .step-number {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 16px;
    }


    .platform-card {
        padding:
            22px
            17px;
    }


    .platform-card h3 {
        font-size: 23px;
    }


    .platform-type {
        margin-right: 20px;
    }


    .platform-tags span {
        padding:
            6px
            9px;

        font-size: 10px;
    }


    .games-ending span {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}