body {
    font-family: 'Poppins', sans-serif;
    background-color: #FFB6C1; 
    min-height: 100vh;
}

/* --- Base Card Animation --- */
.chord-card {
    opacity: 0;
    transform-origin: center;
}

/* --- Genre-Specific Animations --- */
@keyframes popBounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop { animation: popBounceIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes rockShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.animate-rock { animation: fadeIn 0.1s forwards, rockShake 0.4s 0.1s ease-in-out forwards; }

@keyframes jazzSwingIn {
    0% { opacity: 0; transform: rotate(-30deg) scale(0.5); }
    100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
.animate-jazz { animation: jazzSwingIn 0.6s ease-out forwards; }

@keyframes bluesFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-blues { animation: bluesFadeIn 0.7s ease-in-out forwards; }

@keyframes classicalElegantIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.animate-classical { animation: classicalElegantIn 0.8s ease-out forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.title-text-stroke {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    -webkit-text-stroke: 2px #000;
    text-shadow: 3px 3px 0 #000;
}

.puff-text-stroke {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    -webkit-text-stroke: 1px #000;
    text-shadow: 2px 2px 0 #000;
}

.control-input {
    background: white;
    border: 3px solid #000;
    border-radius: 0.75rem;
    padding: 10px 15px;
    font-weight: 600;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s ease;
}

.control-input:focus {
    outline: none;
    box-shadow: 2px 2px 0px #000;
    transform: translate(2px, 2px);
}

.generate-btn {
    background: #FF1493;
    border: 3px solid #000;
    border-radius: 0.75rem;
    padding: 15px 30px;
    font-weight: 800;
    color: white;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s ease;
}

.generate-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.generate-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.chord-display {
    background: white; 
    border: 4px solid #000;
    border-radius: 1.5rem;
    padding: 20px;
    box-shadow: 6px 6px 0px #000;
    /* Flex properties for vertical centering */
    display: flex;
    flex-direction: column;
    min-height: 280px; /* Ensure consistent height */
}

.chord-box {
    background: white;
    border: 3px solid #000;
    border-radius: 1rem;
    width: 80px; /* Fixed width for consistency */
    height: 80px; /* Fixed height for consistency */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.listen-btn {
    background: #FF1493;
    border: 3px solid #000;
    border-radius: 0.75rem;
    padding: 12px 40px;
    font-weight: 800;
    color: white;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 0px #000;
    transition: all 0.1s ease;
    width: 100%;
    margin-top: 15px;
}

.listen-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.listen-btn:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.listen-btn:disabled {
    background-color: #ff85c8;
    opacity: 0.8;
    cursor: not-allowed;
    transform: none;
    box-shadow: 4px 4px 0px #000;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}