/* ========================= */
/* TUTORIAL OVERLAY */
/* ========================= */

.tutorial-overlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 999999;

    opacity: 0;

    pointer-events: none;

    transition:
    0.4s ease;
}

/* SHOW */

.tutorial-overlay.show {

    opacity: 1;

    pointer-events: all;
}

/* ========================= */
/* BACKDROP */
/* ========================= */

.tutorial-backdrop {

    position: absolute;

    inset: 0;

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

    backdrop-filter:
    blur(10px);
}

/* ========================= */
/* BOX */
/* ========================= */

.tutorial-box {

    position: relative;

    width: 90%;

    max-width: 520px;

    padding: 42px;

    border-radius: 34px;

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

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

    backdrop-filter:
    blur(24px);

    overflow: hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.4);

    animation:
    tutorialFade 0.5s ease;
}

/* GLOW */

.tutorial-box::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
    rgba(201,168,87,0.14);

    top: -140px;
    right: -140px;

    filter: blur(25px);
}

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

.tutorial-step {

    display: inline-flex;

    padding: 10px 16px;

    border-radius: 999px;

    margin-bottom: 22px;

    background:
    rgba(201,168,87,0.12);

    color: #C9A857;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 1px;
}

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

.tutorial-box h2 {

    font-size: 2.5rem;

    line-height: 1.1;

    margin-bottom: 20px;

    color: white;

    position: relative;

    z-index: 2;
}

/* ========================= */
/* TEXT */
/* ========================= */

.tutorial-box p {

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

    line-height: 1.8;

    font-size: 1rem;

    margin-bottom: 34px;

    position: relative;

    z-index: 2;
}

/* ========================= */
/* ACTIONS */
/* ========================= */

.tutorial-actions {

    display: flex;

    gap: 14px;
}

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

.tutorial-actions button {

    flex: 1;

    height: 56px;

    border: none;

    border-radius: 18px;

    font-size: 0.95rem;

    font-weight: 700;

    cursor: pointer;

    transition:
    0.3s ease;
}

/* SKIP */

.tutorial-skip {

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

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

    color: white;
}

/* HOVER */

.tutorial-skip:hover {

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

    transform:
    translateY(-2px);
}

/* NEXT */

.tutorial-next {

    background:
    #C9A857;

    color: #111;

    box-shadow:
    0 18px 40px rgba(201,168,87,0.25);
}

/* HOVER */

.tutorial-next:hover {

    transform:
    translateY(-2px);

    box-shadow:
    0 24px 50px rgba(201,168,87,0.35);
}

/* ========================= */
/* ANIMATION */
/* ========================= */

@keyframes tutorialFade {

    from {

        opacity: 0;

        transform:
        translateY(20px)
        scale(0.96);
    }

    to {

        opacity: 1;

        transform:
        translateY(0)
        scale(1);
    }
}

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

@media (max-width: 768px) {

    .tutorial-box {

        padding: 32px 24px;
    }

    .tutorial-box h2 {

        font-size: 2rem;
    }

    .tutorial-actions {

        flex-direction: column;
    }
}