body{
    font-family: Arial, Helvetica, sans-serif;
}
#homeBtn{
    position: fixed;
    top: 20px;

    /* ⭐ container merkezine göre hizalama */
    left: calc(50% - 320px);

    z-index: 999;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
@media (max-width:768px){
    #homeBtn{
        left: 15px;
        top: 15px;
    }
}
.game-wrapper{
    width:100%;
    max-width:520px;
    margin-top: 100px;
}

.card{
    border:none;
    border-radius:25px;
    transition:0.25s;
}

.card.correct{
    background:#d4edda;
    transform:scale(1.05);
}

.card.wrong{
    background:#f8d7da;
    transform:shake 0.3s;
}

@keyframes shake{
    0%{transform:translateX(0)}
    25%{transform:translateX(-6px)}
    50%{transform:translateX(6px)}
    75%{transform:translateX(-6px)}
    100%{transform:translateX(0)}
}

button{
    border-radius:15px !important;
    font-weight:bold;
    letter-spacing:1px;
}

#word{
    min-height:80px;
}

#result{
    animation:fadeIn 0.5s;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px)}
    to{opacity:1; transform:translateY(0)}
}