.community-background {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.background-img {
    width: 100%;
    display: block;
}

.character {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 260px;
    opacity: 0;
    transition: opacity 1s ease;
}

/* boîte de dialogue */
.dialogue-box {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 950px;
    background: rgba(50, 30, 10, 0.85);
    color: #f8e7c4;
    padding: 18px 22px;
    border-radius: 18px;
    border: 3px solid #b89563;
    box-shadow: 0 0 14px rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
}

.dialogue-box.show {
    opacity: 1;
}

/* gestion du texte animé */
.typewriter {
    border-right: 3px solid #f8e7c4;
    animation: caret 0.7s steps(1) infinite;
}

@keyframes caret {
    50% { border-color: transparent; }
}

/* bouton */
#nextButton {
    margin-top: 12px;
    padding: 8px 18px;
    background: #d4b483;
    color: #3a2a15;
    border: 2px solid #b38d56;
    border-radius: 10px;
    cursor: pointer;
}

#nextButton:hover {
    background: #c5a068;
}

/* choix */
.choices {
    margin-top: 12px;
}

.choice {
    margin: 5px;
    padding: 8px 14px;
    background: #cfa66c;
    color: #3a2a15;
    border: 2px solid #b38d56;
    border-radius: 10px;
    cursor: pointer;
}

.choice:hover {
    background: #b98d56;
}

.hidden {
    display: none !important;
}

/* transition retour */
body.fadeout {
    animation: fadeToBlack 1.2s forwards;
}

@keyframes fadeToBlack {
    to { opacity: 0; }
}

/* ===========================
   Hitbox secrète Snake
   =========================== */

#snakeHitbox {
    position: absolute;
    top: 20%;
    right: 15%;
    width: 150px;      /* agrandis si tu veux */
    height: 200px;
    cursor: pointer;
    z-index: 9999;
    background: rgba(255, 0, 0, 0); /* 0 = invisible, mets 0.2 pour debug */
}