.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
    gap: 15px;
    justify-content: start;
}

.reward-card {
    background: #354850;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #ffbe00;
    max-width: 200px;
    border: 2px solid #ffbe00;
    transition: transform 0.2s ease;
}

@keyframes rewardBounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

.reward-card:not(.locked):hover {
    animation: rewardBounce 0.8s ease-in-out infinite;
}

.reward-card img {
    width: 100px;
    height: 100px;
    image-rendering: pixelated;
}

.reward-card.locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@keyframes rewardShake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-2px); }
    50%  { transform: translateX(2px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.reward-card.locked:hover {
    animation: rewardShake 0.3s ease-in-out;
}

.reward-card.locked img,
.reward-card.locked h3,
.reward-card.locked p {
    display: none;
}

.reward-card.locked::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;

    background-image: url("../images/questionmark.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.reward-card.locked {
    border: 2px solid #979595;
    color: #979595;
}