html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Kaydırma işlemini engeller */
}

canvas {
    touch-action: none; /* Dokunma hareketlerinin sayfayı kaydırmasını engeller */
}

span {
    pointer-events: none;
}

body, img, p, span {
    -webkit-user-select: none;    /* Seçimi engelle (Safari, iOS) */
    -moz-user-select: none;       /* Seçimi engelle (Firefox) */
    -ms-user-select: none;        /* Seçimi engelle (Internet Explorer) */
    user-select: none;            /* Seçimi engelle (Diğer tarayıcılar) */
    
    -webkit-touch-callout: none;  /* Uzun basma menüsünü devre dışı bırak */
}

.success-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background-color: black;*/
    background-color: rgba(8, 12, 90, 0.75);
    /*background-color: #050622;*/
    /*opacity: 0.7;*/
    display: none;
}

.success-panel-container {
    position: absolute;
    width: 45vw;
    height: calc(45vw * 1.1);
    max-width: 80vw;
    max-height: 80vh;
    top: 45%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /*background-color: black;*/
    /*opacity: 0.7;*/
}

.success-header-text {
    position: absolute;
    top: 8%;
    left: 50%;
    font-size: 5.2vw;
    font-family: english_font, serif;

    text-shadow:
            0.15vw 0.15vw 0px #000000, /* sağ-alt köşeye */
            -0.15vw 0.15vw 0px #000000, /* sol-alt köşeye */
            0.15vw -0.15vw 0px #000000, /* sağ-üst köşeye */
            -0.15vw -0.15vw 0px #000000; /* sol-üst köşeye */

    color: #feb002;

    transform: translateX(-50%);
}

.level-completion-bonus-text {
    position: absolute;
    top: 24%;
    left: 50%;
    font-size: 2vw;
    font-family: english_font, serif;
    white-space: nowrap;

    text-shadow:
            0.1vw 0.1vw 0px #000000, /* sağ-alt köşeye */
            -0.1vw 0.1vw 0px #000000, /* sol-alt köşeye */
            0.1vw -0.1vw 0px #000000, /* sağ-üst köşeye */
            -0.1vw -0.1vw 0px #000000; /* sol-üst köşeye */

    color: #dadcff;
    transform: translateX(-50%);
}

.success-shine-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 50%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.success-coin-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 20%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.success-earned-coin-text {
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 2vw;
    font-family: english_font, serif;
    white-space: nowrap;

    color: #ffd949;
    transform: translateX(-50%);
}

.get-more-coin-container {
    position: absolute;
    /*background-image: url("./sprites/main_menu/green_buy_button.png");*/
    top: 80%;
    left: 50%;
    width: 20vw;
    height: calc(20vw * 0.3);
    /*background-color: black;*/
    transform: translateX(-50%);
}

.get-more-coin-button {
    position: absolute;
    background-image: url("./sprites/main_menu/green_buy_button.png");
    background-size: cover; /* Görüntüyü butona tam olarak sığdırır */
    background-repeat: no-repeat; /* Görüntünün tekrarlanmamasını sağlar */
    background-position: center; /* Görüntüyü ortalar */
    background-color: transparent;
    border: none;
    top: 50%;
    left: 50%;
    width: 20vw;
    height: calc(20vw * 0.3);
    object-fit: contain;
    transform: translateX(-50%) translateY(-50%);
}
.get-more-coin-button:hover {
    opacity: 0.9;
}

.get-more-coin-video-icon {
    position: absolute;
    top: 50%;
    left: 15%;
    width: 10%;
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

.get-more-coin-text {
    /* background-color: yellow; */
    position: absolute;
    top: 50%;
    left: 30%;
    width: 55%;
    height: 60%;
    font-size: 1.4vw;
    color: #1c4005;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

.continue-container {
    position: absolute;
    /*background-image: url("./sprites/main_menu/green_buy_button.png");*/
    top: 85%;
    left: 50%;
    width: 20vw;
    height: calc(20vw * 0.3);
    /*background-color: black;*/
    transform: translateX(-50%);
    display: none;
}

.continue-button-success {
    position: absolute;
    background-image: url("./sprites/main_menu/green_buy_button.png");
    background-size: cover; /* Görüntüyü butona tam olarak sığdırır */
    background-repeat: no-repeat; /* Görüntünün tekrarlanmamasını sağlar */
    background-position: center; /* Görüntüyü ortalar */
    background-color: transparent;
    border: none;
    top: 50%;
    left: 50%;
    width: 20vw;
    height: calc(20vw * 0.3);
    object-fit: contain;
    transform: translateX(-50%) translateY(-50%);
}
.continue-button-success:hover {
    opacity: 0.9;
}

.continue-text-success {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.4vw;
    color: #1c4005;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    transform: translateX(-50%) translateY(-50%);
}

.no-thanks-button {
    position: absolute;
    top: 95%;
    left: 50%;
    width: 12vw;
    height: calc(10vw * 0.4);
    transform: translateX(-50%);
    background-color: transparent;
    border: none;
}
.no-thanks-button:hover{
    opacity: 0.9;
}

.no-thanks-text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1vw;
    font-family: english_font, serif;
    white-space: nowrap;

    color: #f7f7f9;
    transform: translateX(-50%) translateY(-50%);
}

.fail-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background-color: black;*/
    background-color: rgba(45, 5, 13, 0.75);
    /*background-color: #050622;*/
    /*opacity: 0.7;*/
    display: none;
}

.fail-panel-container {
    position: absolute;
    width: 45vw;
    height: calc(45vw * 1.1);
    max-width: 80vw;
    max-height: 80vh;
    top: 45%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /*background-color: black;*/
    /*opacity: 0.7;*/
}

.fail-header-text {
    position: absolute;
    top: 8%;
    left: 50%;
    font-size: 5.2vw;
    font-family: english_font, serif;

    text-shadow:
            0.15vw 0.15vw 0px #000000, /* sağ-alt köşeye */
            -0.15vw 0.15vw 0px #000000, /* sol-alt köşeye */
            0.15vw -0.15vw 0px #000000, /* sağ-üst köşeye */
            -0.15vw -0.15vw 0px #000000; /* sol-üst köşeye */

    color: #f938a5;
    transform: translateX(-50%);
}

.level-completion-bonus-text {
    position: absolute;
    top: 24%;
    left: 50%;
    font-size: 2vw;
    font-family: english_font, serif;
    white-space: nowrap;

    text-shadow:
            0.1vw 0.1vw 0px #000000, /* sağ-alt köşeye */
            -0.1vw 0.1vw 0px #000000, /* sol-alt köşeye */
            0.1vw -0.1vw 0px #000000, /* sağ-üst köşeye */
            -0.1vw -0.1vw 0px #000000; /* sol-üst köşeye */

    color: #dadcff;
    transform: translateX(-50%);
}

.fail-shine-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 50%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.fail-coin-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 20%;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
}

.fail-earned-coin-text {
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 2vw;
    font-family: english_font, serif;
    white-space: nowrap;

    color: #ffd949;
    transform: translateX(-50%);
}

.get-more-coin-container {
    position: absolute;
    /*background-image: url("./sprites/main_menu/green_buy_button.png");*/
    top: 80%;
    left: 50%;
    width: 20vw;
    height: calc(20vw * 0.3);
    /*background-color: black;*/
    transform: translateX(-50%);
}

.get-more-coin-button {
    position: absolute;
    background-image: url("./sprites/main_menu/green_buy_button.png");
    background-size: cover; /* Görüntüyü butona tam olarak sığdırır */
    background-repeat: no-repeat; /* Görüntünün tekrarlanmamasını sağlar */
    background-position: center; /* Görüntüyü ortalar */
    background-color: transparent;
    border: none;
    top: 50%;
    left: 50%;
    width: 20vw;
    height: calc(20vw * 0.3);
    object-fit: contain;
    transform: translateX(-50%) translateY(-50%);
}
.get-more-coin-button:hover {
    opacity: 0.9;
}

.get-more-coin-video-icon {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 10%;
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

.get-more-coin-text {
    /* background-color: yellow; */
    position: absolute;
    top: 50%;
    left: 30%;
    font-size: 1.4vw;
    color: #1c4005;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;

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

.no-thanks-button {
    position: absolute;
    top: 95%;
    left: 50%;
    width: 12vw;
    height: calc(10vw * 0.4);
    transform: translateX(-50%);
    background-color: transparent;
    border: none;
}
.no-thanks-button:hover{
    opacity: 0.9;
}

.no-thanks-text {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1vw;
    font-family: english_font, serif;
    white-space: nowrap;

    color: #f7f7f9;
    transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 768px) and (pointer: coarse) {
    .success-panel-container {
        width: 100vw;
        height: calc(100vw * 1.5);
        /*background-color: black;*/
    }

    .success-header-text {
        font-size: 11.55vw;
    }

    .level-completion-bonus-text {
        font-size: 4.25vw;
    }

    .success-shine-img {
        width: 70%;
        height: auto;
    }

    .success-coin-img {
        width: 34%;
        height: auto;
    }

    .success-earned-coin-text {
        font-size: 4.25vw;
    }

    .get-more-coin-container {
        width: 42.5vw;
        height: calc(25vw * 0.3);
    }

    .get-more-coin-button {
        width: 42.5vw;
        height: calc(42.5vw * 0.3);
    }

    .get-more-coin-video-icon {
        width: 16.25%;
        height: auto;
    }

    .get-more-coin-text {
        font-size: 2.5vw;
        left: 35%;
    }

    .no-thanks-button {
        top: 90%;
        width: 25.5vw;
        height: calc(21.25vw * 0.4);
    }

    .no-thanks-text {
        font-size: 2.5vw;
        /*font-size: 2.125vw;*/
    }


    .fail-panel-container {
        width: 100vw;
        height: calc(100vw * 1.5);
        /*background-color: black;*/
    }

    .fail-header-text {
        font-size: 11.55vw;
    }

    .fail-shine-img {
        width: 70%;
        height: auto;
    }

    .fail-coin-img {
        width: 34%;
        height: auto;
    }

    .fail-earned-coin-text {
        font-size: 4.25vw;
    }
}