@media (max-width: 700px) {
    .card, .hero, .modal-card, .letter {
        padding: 28px 22px;
        border-radius: 26px;
    }

    .level-nav {
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
    }

    .round-btn {
        width: 44px;
        height: 44px;
        font-size: 30px;
    }

    .puzzle {
        width: 78vw;
    }

    .artifact {
        width: 120px;
        height: 120px;
    }
}
@keyframes caseAppear {
    from {
        opacity: 0;
        transform: translateY(40px) scale(.75);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lidOpen {
    to {
        transform: rotateX(68deg) translateY(-30px);
    }
}

@keyframes caseGlow {
    from {
        opacity: 0;
        transform: scale(.6);
    }
    to {
        opacity: 1;
        transform: scale(1.8);
    }
}

@keyframes caseHide {
    to {
        opacity: 0;
        transform: translateY(40px) scale(.8);
    }
}

@keyframes envelopeRise {
    from {
        opacity: 0;
        transform: translateY(90px) scale(.55);
    }
    to {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
}

@keyframes envelopeHide {
    to {
        opacity: 0;
        transform: translateY(-80px) scale(1.2);
    }
}

@keyframes flapOpen {
    to {
        transform: rotateX(180deg);
    }
}

@keyframes miniLetterUp {
    to {
        transform: translateY(-52px);
    }
}

@keyframes letterOpen {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(.7) rotate(0deg);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-260px) scale(1.25) rotate(160deg);
    }
}