@font-face {
    font-family: "Hallo";
    src: url('../../fonts/Creepster-Regular.ttf');
}

#back_games {
    background-image: linear-gradient(to right bottom, #F8DF51 0%, #E2B534 52%, #A16D11 100%);
    padding: 10px;
    border-radius: 7px;
    position: absolute;
    left: 3rem;
    transition: all 0.3s ease-in;
    color: white;
    text-decoration: none;
}

#back_games:hover {
    transform: scale(1.1);
    background-image: linear-gradient(to left top, #F8DF51 0%, #E2B534 52%, #A16D11 100%);
}

body {
    background-color: #000;
    -moz-user-select: none; /* Firefox */
    -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
    -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
    user-select: none; /* Propriété standard */
}

div#cbtomorrow {
    display: inline-block;
    width: 600px;
    padding: 15px;
    margin-top: 3rem;
    background: linear-gradient(52deg, #1E1E1E 0%, #290973 100%);
    margin-left: calc(50% - 300px);
}

/* Styles généraux */
#block_game {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

/* Conteneur du jeu */
#game-cont {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: #1a202c;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    font-family: "Hallo";
}

/* Arrière-plan défilant */
#background {
    position: absolute;
    inset: 0;
    background-image: url('../../images/games/GHALLO2/background.jpg');
    background-repeat: repeat-x;
    animation: scroll 35s linear infinite;
    pointer-events: none;
}

@keyframes scroll {
    from { background-position: 2145px 0; }
    to { background-position: 0 0; }
}

/* Chauve-souris */
#bat {
    position: absolute;
    left: 40px;
    width: 86px;
    height: 24px;
    transition: transform 0.1s;
    z-index: 2;
    pointer-events: none;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
}

#bat::after {
    content: "";
    display: inline-block;
    position: relative;
    background-image: url('../../images/games/GHALLO2/BatPlayer.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 94px;
    height: 65px;
    z-index: 1;
    left: -3px;
    top: -18px;
    transform: rotate(-23deg);
}

/* Items du jeu */
.candy, .projectile {
    position: absolute;
    width: 40px;
    font-size: 24px;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    line-height: 32px;
}

.projectile {
    height: 40px;
}

.candy {
    height: 28.65px;
}

.projectile {
    color: red;
}

.projectile.eclair {
    background: url('../../images/games/GHALLO2/eclair.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.projectile.crane {
    background: url('../../images/games/GHALLO2/crane.png');
    background-repeat: no-repeat;
    background-size: contain;
}

.candy.o {
    background: url('../../images/games/GHALLO2/bbon-orange.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.candy.p {
    background: url('../../images/games/GHALLO2/bbon-violet.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.candy.g {
    background: url('../../images/games/GHALLO2/bbon-vert.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.candy.b {
    background: url('../../images/games/GHALLO2/bbon-bleu.png');
    background-repeat: no-repeat;
    background-size: contain;
}

#jump_btn {
    display: none;
}

/* HUD */
#hud {
    position: absolute;
    top: 16px;
    left: 16px;
    color: white;
    font-size: 20px;
    z-index: 3;
    pointer-events: none;
}

#scores {
    font-family: "Hallo";
    font-size: 38px;
    width: 600px;
    margin: auto;
    height: 80px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud_score {
    display: inline-block;
}

.hud_score span, .hud_score img {
    display: inline-block;
} 

.disp_candy {
    width: 50px;
    height: auto;
    margin: 0px 20px;
}

/* Overlay */
#overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 4;
}

#message-container {
    text-align: center;
    color: white;
}

#title {
    font-size: 36px;
    margin-bottom: 16px;
}

#restart-button {
    padding: 8px 16px;
    background-color: #9333ea;
    border-radius: 4px;
    color: white;
    border: none;
    cursor: pointer;
}

#restart-button:hover {
    background-color: #7e22ce;
}

/* Cache l'overlay pendant le jeu */
#overlay.hidden {
    display: none;
}

.tel {
    display: none;
}

@media not all and (min-width: 640px) {
    .pc { display: none;}
    .tel {display: block;}
    .disp_candy {
        width: 30px;
    }
    .hud_score span {
        font-size: 28px;
    }
    #game-cont {
        width: 340px;
        height: 340px;
    }

    #scores {
        width: 340px;
    }

    #bat {
        width: 43px;
        height: 12px;
    }
    #bat::after {
        width: 47px;
        height: 32.5px;
        top: -8px;
    }

    #jump_btn {
        display: block;
        padding: 15px 7px;
        background: #9333ea;
        color: white;
        text-align: center;
        font-family: "Hallo";
        border-radius: 7px;
        font-weight: bold;
        margin-top: 10px;
    }

    #block_game {
        min-height: 43vh;
    }

    div#cbtomorrow {
        display: block;
        margin-left: 0px;
        margin-right: 0px;
        width: 100vw;
    }


}