* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: white;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.container {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.postcard {
    width: min(80vw, 600px);
    max-width: 90vw;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.postcard:hover {
    transform: scale(1.02);
}

.postcard-inner {
    position: relative;
    width: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.postcard.flipped .postcard-inner {
    transform: rotateY(180deg);
}

.postcard-front,
.postcard-back {
    position: absolute;
    width: 100%;
    backface-visibility: hidden;
    overflow: hidden;
}

.postcard-back {
    transform: rotateY(180deg);
}

.postcard-front img,
.postcard-back img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive design */
@media (max-width: 768px) {
    .postcard {
        width: min(85vw, 500px);
    }
}

@media (max-width: 480px) {
    .postcard {
        width: min(90vw, 400px);
    }
}

@media (max-width: 320px) {
    .postcard {
        width: 95vw;
    }
}

/* Vibration animation */
@keyframes vibrate {
    0%, 100% { transform: translate(0); }
    10% { transform: translate(-2px, -1px); }
    20% { transform: translate(2px, 1px); }
    30% { transform: translate(-1px, -2px); }
    40% { transform: translate(1px, 2px); }
    50% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
    90% { transform: translate(-2px, -1px); }
}

.postcard.vibrating {
    animation: vibrate 0.5s ease-in-out 3;
}