/* Enhance responsiveness and prevent overlap */
html, body {
    width: 100%;
    overflow-x: hidden;
}

.flip-card {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.flip-card-inner {
    min-height: 500px;
}

.flip-card-front,
.flip-card-back {
    font-size: 1.2rem;
    word-break: break-word;
    text-align: center;
}

/* Ensure text wraps properly and scales */
@media screen and (max-width: 480px) {
    .flip-card-front {
        font-size: 1.5rem;
        padding: 20px;
    }
    .flip-card-back {
        font-size: 1.1rem;
        padding: 20px;
    }
    .birthday-text {
        font-size: 1.5rem;
    }
    .editor {
        padding: 15px;
    }
    .editor input,
    .editor textarea {
        font-size: 0.95rem;
    }
}